Search code examples
cssbackground-imagebackground-color

How to add a color overlay to a background image?

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!

Solution

  • 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(https://picsum.photos/id/1043/800/600);
      background-size:cover;
    }

    shadow option:

    html {
  min-height: 100%;
  background: url(https://picsum.photos/id/1043/800/600);
  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

    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(https://picsum.photos/id/1043/800/600) rgba(255, 0, 150, 0.3);
  background-size: cover;
  background-blend-mode: multiply;
}