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.)