DEV Community

loading...

Discussion on: All CSS Background Properties Explained in 5 Minutes

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.