Full-Scale Background Images with CSS
Having the need for, and recently come across an article by Mark Schenk on the use of scaled images a a background with CSS, I thought that I would add my 2ยข to the equation as i think he is missing out a couple of points that would be super handy for any casual reader and css nerd.
The sweet and the short of Mark’s article from back in 2003, was to set an image with HEIGHT and WIDTH at 100% and a Z-INDEX of -1. In addition to this what he doesn’t express clearly in the article is that you need to set the body to the same WIDTH and HEIGHT with a Z-INDEX of 0 or higher, and set a background color to transparent.
In addition, my amendment to what he suggests would be to, rather than scaling the background image up and down to a ridiculous extent when the website visitors minimizes his or her screen, set the MIN-HEIGHT and MIN-WIDTH properties for the image so that it only scales at the point at which the background images will no longer fill the background space without scaling up.
In terms of disadvantages, if you want content to scroll off the page you are going to hit problems, and will most likely need to set up a JS script to constantly resize the background height and width properties based on the window size. So although this works to a degree it is not altogether perfect.
As it currently stands not all browsers are up-to-date with the CSS3 specs regarding background images, and so this is still one amongst a number of options in terms of achieving full background scaling images.
So dig in and enjoy!
