Question

I have a CSS background image that I am using to fill the entire screen. I am using cover along with some IE fallbacks. When the background image loads it covers all of the content on the page, I cannot figure out why. Here is the code:

CSS:

#background-wrap{ 
background: url(/2012/images/august/moon-background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* Cover for IE 7/8 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/2012/images/august/moon-background.jpg', sizingMethod='scale');
/* End Cover for IE 7/8 */
background-size: cover;
background-color: transparent !important;
position:fixed;
top: 0;
left: 0;
width: 100%;
height:100%;
max-width:3000px;
max-height:1500px;
z-index:1;  
} 

.img-center{ 
    text-align: center;
    z-index:9999;
}

HTML:

<div class="img-center">
  <img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content --> 
<div id="background-wrap"></div>

I am not sure why this is not work.

Note: I will not assign the background-wrap CSS to the body or html tag for compatibility reasons with IE 8 and below. Here is why:

Anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.

Answer 1

you need to wrap your background wrap around the content, not have it after it.

<div id="background-wrap">
<div class="img-center">
  <img src="/2012/images/august/neil-armstrong.png" class="feature-image" />
</div>
<!-- More Content --> 
</div>