Crossbrowser Full Size Backgrounds & Rotator - Blowsie

by blowsie

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

JavaScript

var range = 11;
var numRand = Math.floor(Math.random() * [range]) + 1;

function pickNums() {
    jQuery('body').addClass('img' + numRand);
    jQuery('body').append('<img id="bg" src="http://patrickwolf.com/hq/wp-content/themes/patrickwolf/images/' + numRand + '.jpg" />').find('#bg').hide().load(function() {
         var theWindow = jQuery(window),
            $bg = jQuery("#bg"),
            aspectRatio = $bg.width() / $bg.height();

        function resizeBg() {
            if ((theWindow.width() / theWindow.height()) < aspectRatio) {
                $bg.removeClass().addClass('bgheight');
            } else {
                $bg.removeClass().addClass('bgwidth');
            }
            if ($bg.is('.bgwidth') && theWindow.height() < $bg.height()) {
                var hdiff = [$bg.height() / 2] - [theWindow.height() / 2];
                $bg.css("top", "-" + hdiff + "px").css("left", "0px");
            }
            if ($bg.is('.bgheight') && theWindow.width() < $bg.width()) {
                var wdiff = [$bg.width() / 2] - [theWindow.width() / 2];
                $bg.css("left", "-" + wdiff + "px").css("top", "0px");
            }
        }
        $('#bg').fadeIn();

        theWindow.resize(function() {
            resizeBg();
        }).trigger("resize");

    })

}
pickNums();