Back in 2006, I helped Crush with their new website. They wanted it to be nearly all images, as they had some great images to show and wanted to set them centre-stage.

We came up with the idea of filling the entire background with each of the images: the background would be the page. Of course, we would float some (hide-able) navigation and info over the top, but really it would just be images.

The background would have to scale, and show as much of the image as possible without borders.

This sounds a bit old-hat now: you see this everywhere. But at the time we hadn't seen it anywhere else. I am sure that we one of the first — if not the first — to do it. In fact, except for some Spanish guys who completely ripped off Crush's design, I didn't see it anywhere else for at least a year. Like all the best ideas, it's obvious in retrospect.

Fast-forward to 2011, and I'm doing these full-page backgrounds all the time (even one site with a full-page background video).

I've just finished a project with a background like this and here's how I did it for maximum speed and cross-platform support.

Many modern browsers have built-in support for background images like this, using the "background-size: cover" rule. You set a background image on the html element, position it as 'fixed' and it all should work, and super-fast.

html {
    background: url(/path/to/image) no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

It will work slightly differently on iOS: the image will cover the background of the page and scroll with the content. It'll still look good though!

Kewl. That'll work on Chrome, Safari, Firefox, iOS, Opera, Android.

It won't work on IE < 9, so for that I use Backstretch.

So putting it all together, it goes something like this:

CSS:

html {
    background: black url(/path/to/image) no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Now on DOM ready, check to see if we have support for "background-size: cover". If not, use backstretch.

Javascript

$(document).ready(function() {
    if(!supportsBGCover()) {
        $('html').css('background: black;');
        $.backstretch('/path/to/image', {
            speed: 400
        }); 
    }
});



function supportsBGCover() {
    // Does the browser support background: cover?
    var testEl = document.createElement('div');
    return (
        testEl.style['backgroundSize'] === "" ||
        testEl.style['webkitBackgroundSize'] === "" ||
        testEl.style['mozBackgroundSize'] === "" ||
        testEl.style['oBackgroundSize'] === ""
    );
}

Better still is to add a class to your html element, and remove that class before calling backstretch, but I'll leave that as an exercise for the reader.

comments powered by Disqus