Stop background image from sliding horizontally with browser resize

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 :)

ok i got it to stick to the container using:

<div id="bg-pic-div">
<img src="images/background-bamboo.png" class="bg-pic"/>
</div>

<div id="container">

and css:

#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/

Hello plaedien,
Typically, that absolute positioned image would be positioned into place instead of margined.


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

}

.bg-pic {
width: 478px;
height: 970px;
position: absolute;
top: 0;
right: -300px;
}


I also think it should relative to #container and that #bg-pic-div is not needed at all.

As for your x scrollbar, your site is much wider than your 960px wide container now. The browser has to deal with the overflow somehow...have you tried overflow: hidden; on the body of the document? That's probably not going to work too well on smaller screens though.

Have you looked for a js solution yet?

Thank you so much Excavator!

I'd tried overflow: hidden on the 2 divs in question - but not the body - the effect is exactly what I was trying to achieve. Now the scroll bar only appears once the browser goes beneath the 960 of the main container, which is fine (at least until i play with it being responsive).

:thumbsup:Thumbs up to you sir!

whoops - actually the overflow: hidden killed all vertical scrolling too. Not good.

I couldnt deal with the scroll bar horizontally, 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);
}

from here: http://webdesignerwall.com/tutorials/how-to-css-large-background

now works like a charm!

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

Perfect solution, good job!