172

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!

2
  • a color overlay on-top of the background-image, or behind it?
    – Jacob G
    Commented Apr 17, 2016 at 17:14
  • 6
    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...
    – Alex
    Commented Apr 17, 2016 at 17:20

4 Answers 4

409

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;
}

5
  • 7
    box-shadow: inset 0 0 0 50vw rgba(255,0,150,0.3); is a nice option that should always cover the screen.
    – igneosaur
    Commented Oct 9, 2019 at 0:15
  • I suggest having min-height:100vh; Commented Mar 4, 2021 at 12:54
  • 2
    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
    – Eric. M
    Commented Jun 2, 2021 at 9:27
  • 1
    This is want I needed, I only needed to change: background-blend-mode: overlay; Commented Aug 17, 2022 at 14:12
  • Nowadays, for the first solution, instead of using two linear-gradients, you can now just use one rgba(0,0,0,0.3)
    – clayRay
    Commented May 24 at 3:42
61

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.

5
  • 3
    Better to mention the browser support tables - caniuse.com/#feat=css-backgroundblendmode
    – Stickers
    Commented Apr 17, 2016 at 17:20
  • you're especially right, considering IE/Edge lacks support completely and Safari falls a bit behind. thanks for pointing out!
    – Uzi
    Commented Apr 17, 2016 at 17:29
  • background-blend-mode: multiply; worked best for me with colors Commented May 1, 2022 at 11:10
  • instead of using two linear-gradients, you can now just use one rgba(0,0,0,0.5)
    – clayRay
    Commented May 24 at 3:35
  • if you want to use rgba (no linear-gradient) then the rule shoud apply for background and not background-image Commented Aug 22 at 0:07
49

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);
}
0
12

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);
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.