Multiple backgrounds with CSS3

One of many great features in CSS3 is the multiple background support in one single element. Web designers can now define as many layers as they want, with a simple comma separated list.

Browser support

Most modern browsers has supported multiple background for quite some times now. Mozilla Firefox 3.6 (Gecko 1.9.2), Safari 1.3, Chrome 10, Opera 10.50 (Presto 2.5) and Internet Explorer 9.0 are all fully implementing the feature.

How it works

There are 3 important properties: background-image, background-position and background-repeat

Backgrounds are specified using a comma separated list. Each value will generate a separate background layer. First value in the list will represent the top layer, with the rest rendered behind successively.

Simple example:

background-image: url(a.png), url(b.png);
background-position: center bottom, top left;
background-repeat: no-repeat, repeat;

is equivalent to:

background: url(a.png) center bottom no-repeat, url(b.png) top left repeat;

More in detail example

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

is equivalent to:

background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat no-repeat, repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

Read more on w3.org about backgrounds here

Good practice

This feature enables the making of dynamic sized tabs and menus a lot more easy for web designers.

Here’s an example on how easy creating a dynamic tab menu with the sliding doors technique.

background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;

Easy Starter CSS Templates

Web design has never been easier with these static, Html/css templates. Choose between two or three column and select from over 50 high-res headers and 70 custom backgrounds. Read more