Section background - Another image on the overlay

Hi,

I’m struggling with something completely “simple” lol

I have a section with a background image defined.
With the overlay tools, it’s possible to add multiple color, simple color or gradient effect.

Is it possible to add another image over the initial background image ?

How to do that ?

Thanks in advance for your help :slight_smile:

Without answer…

I have fixed what I needed with a little CSS code:

After adding a <class_name> to my section,

.<class_name>:after {
content:"";
background-image: url('<image_url');
background-repeat:no-repeat;
background-position: right center; /*or whatever you need*/
background-size: 80vw 100%; /*or whatever you need*/
position:absolute;
top:0;
right:0;
height:100%; /*or whatever you need*/
width:100%; /*or whatever you need*/
z-index:1;
}

I have adjusted the z-index to 2 for the container inside the section.

If someone have a better idea, don’t hesitate to share it.

:slight_smile:

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.

See this page to learn more:

1 Like

Thanks Smith :slight_smile:

It’s cool to discover new things !

I’ll keep that in my favorites !

:pray:

2 Likes