CSS "Cover" - No scroll bars?
- by Lynda
I am using the cover property to create a background image that fills the background and resizes with the browser. But I run into one issue, the page has a lot of content and no scroll bars appear for me to scroll down! Here is the code I am using:
body{
background: url(path.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='path.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.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:2500px;
max-height:1500px;
z-index:1;
}
If I remove position:fixed; I get the scroll bars back but the background image disappears. What is the best way to tackle this and have both scroll bars and the background cover image?
Note: I am using jQuery and would use a JS answer if it works (though I prefer a CSS only answer.)
