Forums

plaedien

Hi guys,

This is driving me nuts, and after an exhaustive google search, I cant seem to find a solution to this particular problem.

I have background image in the tag,

html, body { background-color: #ffffff; background: url(images/background-bamboo.png) top right no-repeat fixed; font-family: sans-serif; position: relative; width: 100%; height: 100%; min-height: 100%; display: table; behavior: url(PIE.php); }

which works fine when scrolling up and down, but the problem is when the browser is resized horizontally the background image slides across, when I really want it positioned so that it never leaves the side of the div that sits on top of it.

Here is the site at the moment.

http://onthemend.com.au/test/

at a browser width of about 1525px, this is how I would want the background image to sit.

Any ideas? I know it's most likely something simple, but its doing my head in.

thanks :)

Watson90

Maybe try;

html, body { background: url("images/background-bamboo.png") no-repeat;
background-position: right top;
background-attachment: fixed;

plaedien

whoops my code looks messed up, should've previewed first!

Isn't what I've written already basically the same thing?

html, body { background-color: #ffffff; background: url(images/background-bamboo.png) top right no-repeat fixed; font-family: sans-serif; position: relative; width: 100%; height: 100%; min-height: 100%; display: table; behavior: url(PIE.php); }

plaedien

  html, body {
background-color: #ffffff;
background: url(images/background-bamboo.png) right top no-repeat fixed;
  font-family: sans-serif;
position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
display: table;
behavior: url(PIE.php);

}

Paulie_D

You're going to have to put that image on something else than the body to do that. It's sticking exactly where you told it to...the top right of your body (viewport).

plaedien

I've tried putting it in a separate div before the main container, but it pushes the rest of the site down and I cant seem to wrestle any kind of positioning control from it, for examples float right, margins etc.

Paulie_D

Well the only thing I can think of is to make it REALLY wide and fix it to the left.

That's still not going to pin it to the side of the container and it will slide off to the right side on re-size.

plaedien

ok i got it to stick to the container using a src image:

Code:

   #container {
width: 960px;
padding: 0;
margin: auto;
position: relative;
z-index: 10;
  }

  #bg-pic-div {
width: 960px;
padding: 0;
margin: auto;

  }

  .bg-pic {
width: 478px;
height: 970px;
position: absolute;
margin-left: 750px;
  }

Now the problem is the bamboo image is causing a horizontal scroll bar. Which means at smaller resolutions the whole site is now off centre....

live view: http://onthemend.com.au/test/

Paulie_D

Frankly, if that's the only problem, I'd leave it.

With a width of 960px on your container it'll get a scroll bar anyway once you get near that width.

plaedien

sorry for the weird posts, i dont know what the hell is going on with the giant lettering

Paulie_D

Not a problem

For CSS you just have to type it out, select it all with your mouse and hit the Code button.

It will indent it all and make it show up correctly.

This usually won't work for HMTL.

Frankly, it's much easier to put it in Codepen and link that...it also lets us play with it.

plaedien

I couldnt deal with the scroll bar, so i ended up biting the bullet and doing a large background image which is mostly white - turns out it was only 10kb more than the bamboo by itself anyway - so what the hell. Found this code that makes it work perfectly:

html, body {
    background: #fff url(images/background-bamboo-large.png) no-repeat center top;
    padding: 0;
    margin: 0;
    width: 100%;
    display: table;
    height: 100%;
    min-height: 100%;
  font-family: sans-serif;
  behavior: url(PIE.php);
}

thanks for your suggestions though :)

plaedien

from this site: Your text to link here...

treehouse : what would you like to learn today?

Forums

[Solved] Stop background image from sliding horizontally with browser resize