We visited this concept of re-sizeable background images before… but reader Doug Shults sent me in a link that uses a really awesome technique that I think is better than any of the previous techniques.

This technique and the above background image is credited to this site. Here is what this technique is going to accomplish:

• Fills entire page with image, no white space


• Scales image as needed


• Retains image proportions


• Image is centered on page


• Does not cause scrollbars


• Cross-browser compatible


• Isn’t some fancy shenanigans like Flash

View Demo   Download Files

This is a very tall order, and we are going to be pulling out all kinds of different stuff to make it happen. First of all, because the image needs to scale, a traditional CSS background-image is already disqualified. That leaves us with an inline image. This inline image is going to be placed on the page inside of a bunch of wrappers, each necessary for accomplishing all our goals.

And the CSS: