Use background-size, YepNope.js, & Modernizr to make awesome full screen backgrounds

Update Feb 2nd, 2013: Download the demo! (Go to File > Save, or just hit Ctrl/CMD + S)

I’m not going to spend a lot of time explaining what YepNope, Modernizr, jQuery, or jQuery Backstretch do. Just know that Modernizr detects support for certain browser features, YepNope has the ability to conditionally load resources based on Modernizr, and jQuery et all provide the fallback support for shoddy browsers that can’t make awesome backgrounds.

So how do you get this wagon moving? Here’s the step by step:

Visit Modernizr.com/download/, check off “background-size” under CSS3, leave all the other defaults checked (YepNope is included by default under “Extra”). Click “Generate” then “Download”.
Attach the script you just downloaded into the head of your document. Note that Modernizr needs to be in the head of your document, not near the closing body tag.
Modernizr ~~requires~~ highly suggests you to have a class of “no-js” added to your HTML tag. Add it.

This is where the magic happens. Paste the following code just before the closing body tag:

<script>
  yepnope({
    test : Modernizr.backgroundsize,
    yep : '',
    nope : ['http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', '/path/to/your/jquery.backstretch.js', '/path/to/your/backstretch.custom.js' ]
  });
</script>

This bit of code says, if background-size is supported, don’t load anything else. If background-size is not, Modernizr will add a class of “no-backgroundsize” to your HTML tag whilst YepNope will load jQuery, jQuery Backstretch, and your custom script for jQuery Backstretch.

When you combine jQuery, Backstretch, and the custom Backstretch file, you’ve got about 97.5kb (sans-gzip). Not necessarily huge, but certainly noteworthy. With YepNope and background-size, you can make your page 97.5kb smaller (after all, you’ve still gotta load those ginormous background images, right?).

Download jQuery Backstretch and make your custom Backstretch file (here’s an example). These are your fallbacks. After these are created, edit the path of the script above to reflect their locations.

Time for the CSS. This should get you going:

/* css3 full page bkg, note the background-color declaration aka the super fallback */
.backgroundsize body { background: url(../images/your-image.jpg) #54749a no-repeat center center fixed; -webkit-background-size: cover; background-size: cover; } 
/* Make sure bkg-size comes after the background shorthand & remember to set a base color! */
 
/* set up a bkg when js is disabled, you may want to make other assumptions here */
.no-js body { background: url(../images/your-image.jpg)  #54749a no-repeat center top fixed; }

Edit the “background” declarations to be appropriate for your site. Since jQuery Backstretch is handling things when background-size is not supported, we haven’t declared anything for html.no-backgroundsize body.

Celebrate with a beer. If you can’t have a beer at the moment, grab a Fanta. Whatever floats your boat. You are finished.

If you are not sure (or can’t test) the “nope” part of this equasion, this bit of code could help with that.

I hope that helps folks. Now you can feel good about using CSS3 as a critical piece of your layout whilst providing an easy, reliable fallback for your site’s visitors. You’ve also provided your visitors a background image when their browser doesn’t have javascript turned on. An all around win.

I’ve recently removed comments from this blog. Want to chime in? See something wrong?
Email me at Email me!. I’d love to hear from you. I read every email and welcome your input.