CSS3

• Home / CSS3 Previews / Multiple backgrounds with CSS3

Multiple backgrounds with CSS3

CSS3 allows for multiple background images on one element. To do this, you can separate backgrounds by commas, like this:

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Here’s an example of what this looks like. It allows, with the code above, for the same layout as this page with just 1 div.

The only browser projects having this feature implemented so far are WebKit and KHTML (Konqueror). This got into Safari 1.3 though, and works in OmniWeb 5.5 and up.