In a nutshell, the background-size style gives you another way of utilizing images as backgrounds to HTML elements. Up to now, you could tile the image or have it display only once without repeating. Background-size additionally will let you scale the image to whatever size you like. You can use it in combination with existing background image CSS styles. Now this will prove a very useful trick! Web designers have long been able to make an <IMG> image stretch using percentage specifiers for height and width but had to concoct elaborate workarounds in order to implement scaling backgrounds.

With this little spec, it becomes child's play to create a nice gradient background like this one and not have to worry about making it fit the text, or vice versa. The CSS allows any background image to scale with the text. Of course, in some cases you won't want the stretch to go on indefinitely, but that's a design decision. In addition to letting you use percentages to scale, you can also use pixel values, so it becomes possible to scale an image to some fixed size if that's what you need to do.

Incidentally, the bit just below here is a preview of the next CSS3 style on this page: Multiple Backgrounds. I just thought it would be fun to put one kind of box inside the other. :-)

As if being able to resize backgrounds weren't enough, with Safari you can now also take advantage of the CSS3 style that lets you use more than one background image at a time! Naturally, you can position each image with existing CSS styles, for truly mind-expanding possibilities.

In the example here, I'm using three images, one anchored at the top, one at the bottom, and the third filling in the middle vertically. I could have achieved the same design previously using three separate <DIV> elements, each with its own background image. But now I can do it with one HTML element instead. I did find it a bit tricky getting the middle image to tile appropriately, since apparently the "background-clip" attribute doesn't work quite right in WebKit yet. The middle element is asked to tile vertically 100%, but I couldn't find a way to let it know that it shouldn't expand into the area occupied by the top or bottom images using the CSS3 properties. However, I was able to use background-clip's "border" and "content" values by defining a transparent border at the top and bottom of the text box, and by using extra left and right padding values around the text.

Below you'll see a reprise of the Background-Resize box style, as embedded in a box with multiple background images.