Hello, you can set multiple backgrounds (can also be images) using the “background” property.
.<class_name>{
content:“”;
background-image: url(‘<image_url’), rgba(255,255,0,0.4), linear-gradient(0deg, #474bff 0%, #bc48ff 100%);
background-repeat:no-repeat;
background-position: right center;
background-size: 80vw 100%;
position:absolute;
top:0;
right:0;
height:100%;
width:100%;
z-index:1;
}
The order of how they are displayed will be the first one you put (the image in the example) the one that will always be in front and the last one (the gradient) the one in the background.
If you are going to use several images you can also configure their positions and sizes.
#example1 {
background-image: url(image-1.png), url(image-2.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
to set their values will be in the same position separated by the comma.