How to add a gradient on top of a background image in PG?

Beginners
#1

I have a div with a background image and I want to use a gradient on top of this.
In PG it seems I can either select image or gradient but not both. With a background image already selected if I set some gradient the image is simply deleted and substituted with the gradient css code.
Manually it should be like this:

 #show_bg_2 {
 
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('images/background.jpg');
 width: 80%;
height: 400px;
background-size: cover;
}

Thanks

#2

I was a little curious myself, so I did what I usually do… check out:

and see if that helps any.

1 Like
#3

Thanks, I know how to do this manually; writing the css but my question was how to get this done with the PG visual tools in the style panel. Was hoping to do this with a few clicks.
Thanks

#4

Did you find an answer?

#5

No, I used the above css line.

#6

why not use

background-blend-mode: overlay ;

in CSS?

https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode