CSS3 : Multiple Backgrounds -Tutorial Savvy

CSS3 support multiple background.It supports multiple PNG or color and PNG combinations.
Now In latest browsers we can define multiple background for box level elements.

Example Two PNG Images,

<!DOCTYPE html >
<html>
   <head>
      <title>Multiple Background Demo</title>
      <style>
         .name-container {
         display: inline-block;
         margin: 1em; 
         padding: 1em;
         background-image: url(ball.png), url(tree.png);
         background-repeat: no-repeat, no-repeat;
         background-position: left center, right center ;
         border :1px solid grey;
         padding: 5px;
         height:100px;
         padding-top: 10px;
         color : green;
         font-weight: bold;
         } 
      </style>
   </head>
   <body>
      <div class="name-container">
         Two PNG As Background
      </div>
   </body>
</html>

Firebug Inspection:-

Output:-

Indian Flag (Css3 Multi Background):-

<!DOCTYPE html >
<html>
   <head>
      <title>Indian Falg (Using CSS3 Multiple Background Demo)</title>
      <style>
         .flag-container{
         display: block;
         margin: 1em; 
         padding: 1em;
         background-image: url(orange.bmp), url(chakra.bmp),url(green.bmp);
         background-repeat: repeat-x, no-repeat,repeat-x;
         background-position: left top, center center, left bottom;
         border :1px solid grey;
         padding: 5px;
         height:400px;
         width:600px;
         padding-top: 10px;
         color : green;
         font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class="flag-container">
      </div>
   </body>
</html>