My current website has a full cover background image implemented using the following 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')";
}
The background image works well, but I recently noticed a glitch. When I reduce the browser window size and scroll down, the background does not follow, leaving part of the page with missing background as shown below:
[Placeholder for images]
Is there a solution to ensure that the background image covers the entire page in all circumstances?