How to add a color overlay to a background image?

Question

I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.

How do I add a color-overlay to a background image using CSS only?

Example HTML:

<div class="testclass">
</div>

Example CSS:

.testclass {
    background-image: url("../img/img.jpg");
}

Please note:

• I want to solve this by only using CSS. i.e I do NOT want to add a child div within the div "testclass" for the color overlay.

• This should not be a "hover effect" I want to simply just add a color-overay to the background image.

• I want to be able to use opacity i.e. I am looking for a solution that allows RGBA color.

• I am looking for just one color, lets say black. Not a gradient.

Is this possible? (I would be surprised if not, but I have not been able to find anything about this), and if so what the best way to accomplish this?

All suggestions and advice are appreciated!

Answer 1

I see 2 easy options:

• multiple background with a translucent single gradient over image
• huge inset shadow

gradient option:

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow option:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

---

a third option

• with background-blen-mode :

  The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}