CSS Backgrounds Multiple Background Image
Example
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%);
}
