Easy Full Screen Background Images with jQuery

“There are many like it, but this one is mine.”

A recent Weightshift project, Central, brought about a few development challenges, one of which was background imagery. Naz had designed the page to include photography set behind the content. This raised questions:

  • How would we deal with the additional weight of the images (~150–250K) without dragging down the page’s load time?
  • Everyone’s browser window will be a different size. How do you determine what is the best/largest size to make the image, so that it fills the entire window?
  • How do you account for images that are proportioned differently?

I did some research and found a few good solutions, though each had its limitations.

CSS-based solutions were straightforward, but didn’t address the requirement of triggering the download only after the page was ready. Javascript solutions addressed the page load requirement, but were often more complex than we needed and required the user to have prior knowledge of the image size (something that we couldn’t necessarily predict). The final solution was not novel, it was an amalgam of both solutions, implemented in Javascript.

Backstretch is a simple plugin recreated from the code used on Central, derived from the ideas presented in existing CSS and JS solutions. It is meant to be used by those who want a lightweight, minimalist implementation of dynamically-resized background images that can be executed in one line of Javascript, with nothing more than a link to an image.

Download Backstretch

Posted on January 20, 2010 at 11:39 am.