Fullscreen background image inside frame with jQuery

Set an image as html background that takes the full browser dimensions inside a frame using css and the jquery library.

First we load the jquery library by inserting:

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

between the head tag of our document. This code loads the jquery library straight from Google and we do this for caching purposes.

The CSS

body{margin:0px; padding:0px; background:#fff;}
#bg{position:fixed; z-index:1; overflow:hidden; top:20px; left:20px;}
#bgimg{display:none;}
#preloader{position:relative; z-index:2; width:32px; top:50%; margin:-32px auto;}

The markup

<div id="bg">
    <div id="preloader"><img src="http://manos.malihu.gr/tuts/ajax-loader.gif" height="32" width="32"></div>
    <img src="http://manos.malihu.gr/tuts/thebgimg.jpg" id="bgimg" height="900" width="1200">
</div>

We have given an id of bgimg to our image which will be inside a div with an id of bg. We place the background div on z-index:1, so all other content should be on z-index:2 or higher. Also the position is fixed so the background doesn’t scroll with the rest of the content and an overflow of hidden hides any unnecessary scrollbars. The top and left position are set to 20 pixels and act as borders. You can change it to any value you like, as long as you remember to also change the variable theBorder in the script.

Next we need to insert the actual script that does the work of streching proportionaly and centering our image and adds the preloader with some fade effects. We’ll insert this at the very end of the document, just before the closing body tag

<script>
$theBorder=20; //border around image (change top and left values of #bg accordingly)
$bg=$("#bg");
$bgimg=$("#bg #bgimg");
$preloader=$("#preloader");
$(window).load(function() {
    FullScreenBackground($bgimg,$bg);
 
    $(window).resize(function() {
        FullScreenBackground($bgimg,$bg);
    });
});
 
$bgimg.load(function() {
    var $this=$(this);
    FullScreenBackground($this,$bg);
    $preloader.fadeOut("fast");
    $this.delay(200).fadeIn("slow");
});
 
function FullScreenBackground(theItem,theContainer){
    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);
    };
    $(theContainer).css("width",winWidth-($theBorder*2));
    $(theContainer).css("height",winHeight-($theBorder*2));
    $(theItem).css("margin-left",(winWidth- $(theItem).width())/2);
    $(theItem).css("margin-top",(winHeight- $(theItem).height())/2);
}
</script>