How Does This Background Image Work?

Question

So This website:

http://www.atomicdust.com/

They have a background image on every page but when zooming, it doesn't change - ever. Not to mention how fast it loads. How is that possible to have content zoom without the background image? I could understand if it was a repeated image but this is not.

Answer 1

It uses jQuery and this:

$.fn.bgResize = function(options) {

    var defaults = {  
        imageWidth: 800,
        imageHeight: 600
    };

    var options = $.extend(defaults, options);

    var obj = $(this);

    var initHtml = obj.html();

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    obj.height(windowHeight);
    obj.width(windowWidth);
    $('#work-wrapper').height(windowHeight);
    $('#work-wrapper').width(windowWidth);

    obj.html('<div id="inner-bg">'+initHtml+'</div>');

    $('#inner-bg img').each(function(){
        $(this).css({'display' : 'block', 'width' : '100%', 'height' : '100%'})                              
    });

    function doResize(){

        var screenheight = $(window).height();
        var screenwidth = $(window).width();

        var imageheight = options.imageheight;
        var imagewidth = options.imagewidth;

        var ratio = imagewidth/imageheight;

        var testwidth = screenheight * ratio;
        var testheight = screenwidth / ratio;

        obj.height(screenheight);
        obj.width(screenwidth);
        $('#work-wrapper').height(screenheight);
        $('#work-wrapper').width(screenwidth);

        if (testheight < screenheight){
            obj.children('#inner-bg').width(testwidth);
            obj.children('#inner-bg').height(testwidth/ratio);
            var finalheight = Math.round(testwidth/ratio);
            var finalwidth = testwidth;
            var topoffset = (finalheight - screenheight)/2;
            var leftoffset = (finalwidth - screenwidth)/2;
        }

        else if (testheight > screenheight){
            obj.children('#inner-bg').height(testheight);
            obj.children('#inner-bg').width(testheight * ratio);
            var finalwidth = Math.round(testheight * ratio);
            var finalheight = testheight;
            var topoffset = (finalheight - screenheight)/2;
            var leftoffset = (finalwidth - screenwidth)/2;
        }

        else {}

        obj.children('#inner-bg').css("top", -topoffset);
        obj.children('#inner-bg').css("left", -leftoffset);

    }

    doResize();

    $(window).resize(function(){
        doResize();
    });


    return this;

};

Answer 2

On that site it looks as though it's done by a script, as @rownage observes, but I've done it successfully in modern browsers using the (CSS3) "cover" property, i.e. background-size: cover; According to my notes (hurrah for comments!) this A List Apart article is where I got my information from.

On my (very much still-in-progress!) photo site, it looks like this at the moment. The background stays the same size when zooming in the browsers I've tried. Though it wouldn't surprise me if Internet Explorer couldn't cope with it.

As to how fast the images on that site load, the trick is simply a good choice of compressible image, well-compressed. The background that loaded when I visited their site is 1024x680 pixels, but because it's mostly black and white with large areas of plain colour, it compresses down to a pretty tiny 74KB.