CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list of images source paths. 

Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.

NOTE: A comma separated list is also used for the other background properties; background-repeat, background-attachment, background-position, background-clip, background-origin and background-size. The comma separated lists from the individual properties are then matched up, starting with the first value in each list.

If excess values are specified for any of the individual properties they are ignored. For example; if four values are supplied for the background-position property, but only three values are supplied for the background-image property, the fourth value in the list would not be used.

Similarly, if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for the background-image property, the list of values for background-position would be repeated, and thus the third background image specified would have the same background-position value as the first.

If a background color is specified, using the background-color property, this is applied as the final background layer, behind any background images.

Example

The example of how to set multiple background images in CSS3:

 

›› go to examples ››