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.