CSS3 BACKGROUND IMAGES

Here is a very simple example showing the use of multiple background images in one div. Is this the end of nested elements with tons of CSS to create a layered effect? Hope so.

1
2
3
4
5
6
7
8
9
#multipleBG {
  border: 5px solid #cccccc;
  background:url(img1) top left no-repeat,
             url(img2) bottom left no-repeat,
             url(img3) bottom right no-repeat;
  padding: 15px 25px;
  height: inherit;
  width: 590px;
}

Browser Support:
FireFox 3.0 and later, Google Chrome 1.0, IE 6 and later, Opera 9.6, Safari 3.2.1

EXAMPLE