Expanding Background whilst keeping original aspect ratio

Question

I would like to be able to set a background on our homepage which can expand and contract with the window size whilst keeping the original images aspect ratio.... I'm guessing this will need some clever Javascript or similar.

The effect has been implemented here whereby then the window exceeds around 1500 pixels in width the background will dynamically expand.

http://www.pixelcrayons.com/

Answer 1

First the bad news: CSS doesn't (currently) allow a background image to be stretched or scaled, so it isn't as easy as it should be.

However, there are a number of ways around it. The best solution (IMHO) is to have a normal <img> tag sized to 100%, positioned absolute (or even static depending on the effect you want) and layered behind everything else using z-index.

The best thing about this option is that there's no Javascript involved.

But if you want to find out about the other solutions (that do involve Javascript), then try this link: http://css-tricks.com/how-to-resizeable-background-image/ (but note that his preferred solution in the end is the same as mine)

Hope that helps.