How to add a color overlay to a background image? [duplicate]

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!

Adamek

a color overlay on-top of the background-image, or behind it? – Humo

If you think its a duplicate then show me a link. Because none of the other qustions I have found have had the same demands I have example not to use a child-div and solve it by only using CSS. Possible I have missed it doe... – Adamek

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(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

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

Explosive

box-shadow: inset 0 0 0 50vw rgba(255,0,150,0.3); is a nice option that should always cover the screen. – Hokanson

I suggest having min-height:100vh; – Pantheism

box-shadow: inset 0 0 0 50vw rgba(255,0,150,0.3) is the best and most easy answer to this question a have seen for know – Arrogate

This is want I needed, I only needed to change: background-blend-mode: overlay; – Adamec

Answer 2

background-image takes multiple values.

so a combination of just 1 color linear-gradient and css blend modes will do the trick.

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

note that there is no support on IE/Edge for CSS blend-modes at all.

Bale

Better to mention the browser support tables - caniuse.com/#feat=css-backgroundblendmode – Phelia

you're especially right, considering IE/Edge lacks support completely and Safari falls a bit behind. thanks for pointing out! – Bale

background-blend-mode: multiply; worked best for me with colors – Overlong

Answer 3

You can use a pseudo element to create the overlay.

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

Phelia

Answer 4

Try this, it's simple and clear. I have found it from here : https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {

  width: 300px;
  height: 200px;

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

Finely