How to set a background image to a container and with a transparent overlay?

I’d like to set a background image for my container element, which I’m able to do in the Design panel. But then I’d also like to set a color bg as an overlay for the very same container with a bit of transparency, so that the image fits with my brand. How would I do this? When I choose the color along with the image as a background, only the image appears as the background.

Hi,

In the css stylesheet you can add this to that class:

box-shadow:inset 0 0 0 2000px rgba(130, 14, 168, 0.8);
The 0.8 is the opacity if you want to set it up more or less.

1 Like

This is more of a CSS question, rather than a Wappler one.
What we do is have a position-absolute div which has overlay background colour placed on top of the original div.

2 Likes

Thank you.

Thanks.