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.
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.
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
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