Streaming live at 10am (PST)

How to lower section transparency without affecting elements inside

So I made the background of my section as an image and I would like to lower the image’s transparency. But when I lower the transparency for the section, every element inside it gets a lower transparency too. This makes sense of course but is there any work around so I can keep the other elements inside the section(like text inside a container inside the said section) from having the same transparency as the section?

Turn your background-image into an image in the background, or into a div in the background with a background-image (:

remove your background-image
set your section to position:relative (has no visual effect)
add a div in your section, set it to width and height 100%, position absolute and click on the first button, the one putting it to the upper left corner. the div should take up all the space of the section
add your backgroudn image to this div and set the opacity
if the div is masking other section’s element, give it a z-index of 1 while giving other elements a z-index above 1

should do what you expect

1 Like

Thank you Vincent, excellent tip!