Fullscreen background image with jQuery

Set an image as fullscreen background in your html document, that is centered and proportionally scaled according to browser window.

Load the jquery library straight from Google’s CDN in your html document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance).

Add the markup of your background image

<div id="bg">
    <img src="image-name.jpg" width="1280" height="800" id="bgimg" />
</div>

Change the source attribute image-name.jpg to your image path and set its actual width and height attributes.

The css for the image container:

body{margin:0px; padding:0px; background:#000;}
#bg{position:fixed; z-index:1; overflow:hidden;}

Next we need to insert the actual function that does all the work of streching proportionaly and centering our image. So after the jquery inclusion insert:

<script type="text/javascript">
function FullScreenBackground(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
$(theItem).css("margin-left",winWidth / 2 - $(theItem).width() / 2);
$(theItem).css("margin-top",winHeight / 2 - $(theItem).height() / 2);
}
</script>

This function makes our image width and height stretch, depending on the browser and image dimensions ratio.

Finally, insert the functions that check when our page is loaded and browser is resized:

<script type="text/javascript">
window.onload = function () {
FullScreenBackground('#bgimg');
}
$(window).resize(function() {
FullScreenBackground('#bgimg');
});
</script>