Hack 22. Set Multiple Background Images to the Same Element

The CSS3 version of the background attribute allows you to set layers of images as the background of your elements. Each layer can have its own background properties for designs that are more intricate than were previously possible.

Background images have always been an extremely useful feature in CSS. Prior to CSS3, if you wanted to have multiple background images (say, a background pattern and a logo) you had to hack up a solution that included nested elements and separate CSS declarations. It was both tedious to write and difficult to troubleshoot. When it was all said and done, you were left with a slew of extra markup that only existed to facilitate the needs of the design. CSS3 now supports the long-awaited feature of multiple background images. Any one element can have multiple background images set to different “layers” of the background.