CSS3 multiple background images

CSS3 supports the concept of multiple background images on page elements. Instead, CSS 2.1 allows only one background image to be applied on elements. For example, if you wish to have a tabbed menu with a rollover effect on :hover, in CSS 2.1 you should use a markup like this:

<div id="navigation">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Articles</span></a></li>
</ul>
</div>

Then you have to apply two separate background images, one on the a element and the other on the span element. CSS3 circumvents this limit by allowing you to use multiple background images directly on links, thus avoiding the use of a non-semantical additional element:

#navigation a {
      float:left;
      background-image: url("img/tableft.gif"), url("img/tabright.gif");
      background-position: 0 0, 100% 0;
      background-repeat: no-repeat;
      margin:0;
      padding: 5px 15px 4px 11px;
      color:#24618e;
      text-decoration:none;
      font-weight: bold;
      display: block;
}
    
    
    
#navigation a:hover {
      background-position: 0% -42px, 100% -42px;
      color: #fff;
}

The newly supported features are simply to understand: instead of specifying only a single value for each property, now you can add up to four values, using commas as separators. Another example are boxes with rounded corners. In CSS 2.1 you have to use a markup like the following:

<div id="box">
   <div id="box-top-right">
         <div id="box-bottom-left">
  <div id="box-content">
  ...
  </div>
          </div>
   </div>
</div>

Again, you have to apply a separate background image on each nested element, starting from the outermost one. With CSS3 you need only one element and one single CSS rule:

#box {
  width: 240px;
  background-color: #d16c00;
  background-image: url("img/topleft.gif"), url("img/topright.gif"), url("img/bottomleft.gif"), url("img/bottomright.gif");
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0,  0 100%, 100% 100%;
  color: #fff;
  padding: 10px;
}

This feature is currently fully supported by Firefox, Safari, Opera and Chrome. Internet Explorer will support it with the new incoming release.