DEV Community

Discussion on: Background image with gradient overlay in CSS

horus_sky profile image
Cedric W

Nice "nugget". I think you can optimize the code a bit by using Multiple backgrounds. Use the top (first) background as a linear-gradient using RGBa or HSLa, then using the bottom (second) background as the image. It should work the same as using a pseudo-element but with less code.

Example below:

.bg-img {
  width: 100vw;
  height: 100vh;
      rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('') center center no-repeat;
  background-size: cover;

I made a codepen example with a one color overlay, and a multi-color overlay, both using linear-gradients.

paramharrison profile image
Paramanantham Harrison Author

That’s awesome. Thanks for the example, I will take note of it.