DEV Community

loading...

Discussion on: All CSS Background Properties Explained in 5 Minutes

Collapse
hadrysmateusz profile image
Mateusz Hadryś Author

You can set background: transparent for full transparency. If you only want something to be semi-transparent you can use rgba. For example: rgba(255,0,0,0.5) is a half-transparent red.

Collapse
rohit_lodh profile image
Rohit Lodh

But how to do the same for background image and not just color?

Thread Thread
hadrysmateusz profile image
Mateusz Hadryś Author

If you want full transparency then don't set the background-image property at all or use background-image: none.

If you want a partially transparent image, I think you have to use opacity

Thread Thread
krisprodigy profile image
krisprodigy

You can always use a ::before pseudoelement with a 100% width and height, absolute position and opacity e.g. 0.6, of the element you need the semi transparent background and set the background image in this pseudoelement.

Thread Thread
rohit_lodh profile image
Rohit Lodh

But using the opacity property will make the text opaque too right? 😅

Thread Thread
krisprodigy profile image
krisprodigy

No, because you're using the opacity only on the pseudoelement, not the whole element.

Thread Thread
rohit_lodh profile image
Rohit Lodh

Oh, okay. Thanks 😃 Will try.

Thread Thread
igorgac profile image
Igor Gąciarek

What about a gradient?
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("bg.png");

Thread Thread
hadrysmateusz profile image
Mateusz Hadryś Author

This would create a half-transparent black overlay over an image.

The result looks like this

That's because using multiple background layers doesn't modify other layers, it just stacks them on top of each other.

To get a semi-transparent image background, we need to use another element (or pseudo element as was suggested above) with an image background and an opacity lower than 1, and position it under another element using position: absolute.