Full Width Background images?

Hey folks,

I was wondering what the best way to get a full page width background image would be? Where it would expand / contract as the browser does. Two example sites where you can see what I mean are: http://www.shopify.ca/ and [URL=“https://www.airbnb.ca/”]https://www.airbnb.ca/, as well as many others. If you look at the background image (not the entire site background, but just a small portion of it) they have it display nicely in the back and as you move the browser window, adjust size, etc, it stays intact (even though it may contract, etc).



You can do this with JavaScript or with CSS3. What range of browsers do you need this to work in?

I’d prefer to get it to function in basically all the major browsers if at all possible (even IE 7/8 if it is possible as well)


One of those is just a very large image centred in the background and doesn’t actually scale. It’s just faded out at the edges. The other one does scale but doesn’t work in ie8 and below.

If you are using jquery already then I’ve used backstretch before and it works on Ie7 without problem.

Or you could just go the css3 route and used background-size for good browsers and let older browsers just have a centred image. Chis Coyier has a round up here that you will find useful.

Ah thanks a lot, they both seem quite useful, especially Backstretch, I’ll probably take a closer look into that.