Multiple Background Image

In CSS3, we can stack multiple background in the same element.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Images will be stacked atop one another with the first background on top and the last background in the back. img_1 will be on top, the img_2 and img_3 is on bottom.

We can also use background shorthand property for this:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

We can also stack images and gradients:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

Demo

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents