In CSS3 you can specify for an object to contain multiple backgrounds. Using multiple backgrounds in CSS3 will allow you to overlap images or even repeat multiple images. This is absolutely fantastic. The user must be on a browser that supports multiple backgrounds; and, unfortunately it seems that the latest version of Safari is the only browser that currently supports multiple backgrounds. The following images are the images we are going to set as background to an object:
So, to add multiple backgrounds on an object we will add the following CSS:
.card_background
{
background: url(https://cdn.devdojo.com/posts/images/May2018/card-black-seven.png) top left no-repeat, url(https://cdn.devdojo.com/posts/images/May2018/card-red-eight.png) top 20px no-repeat, url(https://cdn.devdojo.com/posts/images/May2018/card-black-nine.png) top 40px no-repeat;
display:block;
height:100px;
width:120px;
}And the following HTML
<span class=".card_background"></span>And it's as simple as that.