Set background opacity without changing element opacity

Is there a way to change only the section background opacity without changing the opacity of any of the other elements in that section?

1 Like

If you put image inside the section like a background you can got what you need :wink:

Hello @kterry01

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

Thank you. I thought that was going to be the solution. Just hoping there was a way to set background image opacity separately.

You can’t change opacity of background only. There is no CSS property “background-opacity”. You can use div, img or some pseudo element for fake it.

1 Like

Unfortunately, I can’t place text over image elements. However, I found a solution. I added a linear gradient effect to the background image and set the colors to white at both ends. I then set the opacities of each color to 50%. Not only does this change the opacity of the background image, I can now add tint or gradients to the image without affecting any other elements in the section.


Excellent. This is exactly what I was looking for. :+1:

1 Like