Discussion on: Background image with gradient overlay in CSS

[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;
  background:linear-gradient(
      rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://unsplash.it/600x600') 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.

[Paramanantham Harrison]

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