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

[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…](http://webdesignerwall.com/tutorials/how-to-css-large-background “Large backgrounds”)

[Author]

Posts