Sticky Background Image
If you want your background image to stay fixed while scrolling, you can set the background-attachment: fixed; property on the body.
body {
background: url('images/bkg-img.png') no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Enhancing with jQuery
If you need the background image to scroll with the page, consider using JavaScript or jQuery to handle this for a cleaner HTML and CSS structure.
function stretchBg(width, height, contain) {
var pageWidth = $(document).width();
var pageHeight = $(document).height();
if ((pageWidth / pageHeight) > (width / height) == !!contain)
$('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
else
$('body').css({backgroundSize: pageWidth + 'px auto'});
}
$(document).ready(function(){ stretchBg(640, 480); }); // On page load
$(window).resize(function(){ stretchBg(640, 480); }); // On browser resize
JSFiddle Demo (and standalone version of the demo)
To maintain the aspect ratio, provide the original width and height of the image to the function, along with an optional parameter specifying whether the image should cover or contain the page (default is cover).
For a more advanced option, check out this demonstration (and standalone version) that automatically detects the resolution of the current body background image:
$(document).ready(function(){
FullBodyBackground.init({contain: false});
});