Stop background image from sliding horizontally with browser resize

[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

[plaedien]

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/

[Excavator]

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?

[plaedien]

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

Thumbs up to you sir!

[plaedien]

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...rge-background

now works like a charm!

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

[Excavator]

Perfect solution, good job!