Large CSS background moves on resize, in IE 8

This post is in continuation to the a solution given by webdesignerWall, regarding the use of large CSS backgrounds in your website. You can check the site below:

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

The solution he states is that of using display:table; for body tag wherein you are specifying your large background.

The solution works quite fine! But when it comes to IE 8 – unfortunately, you end up in a mess.

I have a small work around for this issue. It works totally cool in almost all the browsers.

Solution:

All you need to do is load the same image twice – one for the body, and the other for a header div container. Difference being the body will be showing the full width of 100% but the header container will show only say 1000px, of center of the image.

Have a look at the CSS to get an idea:

body {
background:url(Images/bg.png) no-repeat center top;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#ms-container
{
background:url(Images/bg.png) no-repeat center top;
margin:0 auto;
position:relative;
width:1000px;
}

Trick here is – during resizing to higher resolution, the background keeps showing, while the center section remains steady, you get a continuous image- actually overlapping, one with 1000px centered to your screen, while the other being the big image, 100% to the body, in its full glory.

And when you resize to smaller resolution, the 1000px guy comes into play, while the body background image keeps on moving in the behind (who cares 😉 all you see is the div container, which is stationary)

Worked successfully in almost all the browsers. But do verify it.

One note:Ensure that you play with paddings, borders, positioning and any css property that can shift the div container position by a pixel or two. You dont wanna show the end user that you are loading two images. Also, site performance wud be affected a bit. Can’t help it.

Hope this solves the problem!