Question

I currently have a complete cover background image.

Here is the code:

#back{ /* #back is a div */
    position:absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;

    background: url(images/bg.jpg) no-repeat center center fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')";
}

It appears to work well, but I discovered a glitch in it that I was hoping someone could help me with.

If I reduce the browser window size from the bottom up to say half of my page and then use the browser’s scroll bars to scroll down, the background doesn’t follow.

I’m left with something that looks like the below images

Is there a way I can combat this? I wish the background image to cover in all circumstances.

Answer 1

It’s not a problem of background-size:cover. It’s a problem of position:absolute

Check this http://jsfiddle.net/8b27V/