CSS: multiple background images

CSS3 allows now for the insertion of multiple background images on the same element. In other words, the syntax of the background, background-image, background-repeat and background-position properties accepts up to four values, separated by a comma. Let's make an example.

body {
 margin: 0;
 padding: 0;
 background: #666;
}

#branding {
 height: 220px;
 background: url(header.jpg) repeat-x;
}

#branding h1 {
 height: 100%;
 margin: 0 auto;
 width: 80%;
 background: url(header_left.jpg) no-repeat 0 0,
             url(header_right.jpg) no-repeat 100% 0,
             url(balloons.gif) no-repeat 50% 50%;
 font: normal 2em "Trebuchet MS", Trebuchet, sans-serif;
 color: #fff;
 text-indent: 1.5em;
 text-transform: uppercase;
}

#branding h1 span {
 position: relative;
 top: 0.5em;
}

On the h1 element, I've used the shorthand background property with three different values, separated by a comma. As you can see, the syntax differs only for the commas used there, but the rest is just like any other background declaration. You can see this example below.

Example

Live example