Sunny Books
What we have

CSS3 Multiple Background Images

CSS3 provides developers the ability to apply multiple images as background images for box elements . This feature can give us more effective ways to create web pictures. Applying multiple background images in CSS3 is quite easy, just using a comma with the standard background property.

Syntax

background: url(bg-image-1) position repeat, url(bg-image-2) position repeat, url(bg-image-3) position repeat;

Browser support

1.3

1.0

3.6

9

10.5

Example

Below is an example with three background images: sky.jpg, grass.png, and bunny.png

div[demo] {
background: url(bunny.png) center center no-repeat,
url(grass.png) center center no-repeat,
url(sky.jpg) center center no-repeat; ;
}

Note:put the background image on the top first in the "background" property. In this example, put bunny.png first because this image should appear at the top level, then put grass.png, and sky.jpg at the last.

SUNWEB EXPERT