CSS3 Multiple Backgrounds

Another useful feature in CSS3 is the ability to creat multiple backgrounds on a single box element.
In CSS2, you could only create one background image per element. So having multiple backgrounds required you to create many elements and apply an extra <div> for each extra image. This resulted
in heavy markup text and increased the page file size. If you wanted to add more images later, you would need to change both the HTML and the CSS structure.
There are many situations where you can use multiple background images:
Using several images to cover the full width or height of a box element.
creating a jigsaw image that is made up of multiple images.
Creating a parallax effect that lets the images shift disproportionately when the web page is resize or a mouse is rolled over an object.
Creating irregular or rough-edged box effects that need images on both sides.
Using a combination of background images, textures, and solid colors.
Browser support of multiple background
	Browser	Versions	Supported or Not
	IE	9	Yes
	Firefox	3.6	Yes
	Chrome	7	Yes
	Opera	10.5	Yes
	Safari	3	Yes
Example:
/* support for multiple backgrounds */
div#container {
	background:url(images/lily.jpg) no-repeat top left,
	url(images/sunflower.jpg) no-repeat top right;
	}
In the above example,
	You can apply multiple background images by adding a new background declaration. Then you specify a comma-separated list of values in the background or background-image property,
	The first value in the list represents the top layered image, with subsequent image rendered behind successively. You can resize, repeat or reposition independent images using properties like background-repeat:no-repeat, repeat-x, repeat-y etc…