How to apply CSS styles only to the parent container

How To
1

Hi,

I want to apply the opacity style to a background image, and have some text on top of it.

I’ve added the image to a parent container and applied the style.

However, the same style applies to the text in the child container.

How do I stop it from inheriting the style?

Thanks

2

This is more of a general CSS issue, where opacity will always affect the child elements. There isn’t a way to make it behave in the way you want.

You’d need to add the background to a seperate element (or psuedo element) and manually place it behind the content using position absolute and a lower z-index than the text, so it looks like a background image but actually you’re fading a seperate element.

eg How to change background-image opacity in CSS without affecting text | HTML/CSS - Coder Coder (scroll down the tutorial to see their soluton, where you use ::before to add a background)

1 Like
3

Hi, thanks for the clarification and suggestion.

In this instance, I’ll just edit the image and that will to the trick.

But good to know what the limitations are.

L