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.