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> </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!

4

4 Answers

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(); background-size:cover; }

shadow option:

html { min-height:100%; background:url(); 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() rgba(255, 0, 150, 0.3); background-size:cover; background-blend-mode: multiply; }
6

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

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.

3

Try this, it's simple and clear. I have found it from here : 

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