Multiple background images

It is possible to have multiple background images for the same element.
See the example below:
The CSS:

.my-bg-div
{
background-image:url(1443366318_Plastic_model.png), 
url(1444576493_Bird.png);
background-repeat:repeat-x, repeat-x;
background-position: bottom left, top left;
}

The result:
background-images multiple

The background images are separated by a comma. Notice also that the other background properties ( repeat and position) also can be given separated by comma.

multiple background images CSS example

Demo1

22934

Here is another example where the first background image covers the entire area and the second background image is tiled on top of that

Demo2

22934

When there are multiple background images, notice the order in which the images are stacked.

stacking multiple backgrounds

More on background image

Close

Copy and paste this code to display the image on your site

Copied!