Multiple Background Images with CSS3

Utilizing multiple background images with CSS3

It has been a long-time dream of many web developers to have multiple images as a background for one div. There are numerous benefits to this, but one of my favorites is the repeating gradient with an image layered on top. Yes, you can achieve this by creating a whole bunch of extra <div>s and ensuring that the styling is correct in so many different places. Then, all you have to do is keep hoping against hope that one floating <div> or an absolute placement doesn’t mess everything out of whack.

To get the job done a lot quicker and easier, simply use comma separated arguments:

1
2
3
4
5

.complicated_bg{
background-image: url("../image/one_img.jpg"), url("../image/bg_gradient.jpg");
background-position: center top, left top;
background-repeat: no-repeat, repeat-x;
}

Notice that the image you want layered on top is positioned first in this. In order to place multiple images over one another, simply layer them from first to last, highest to lowest in your CSS.

That’s it! You have multiple background images placed in one <div>!