How to overlay image with color in CSS?

Question

Objective

I want a color overlay on this header element. How can I do this with CSS?

Code

#header {
  /* Original url */
  /*background: url(../img/bg.jpg) 0 0 no-repeat fixed;*/
  background: url(https://fakeimg.pl/250x100/) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

Please explain "color overlay". What effect are you looking for, exactly? — DevlshOne, Sep 15 '13 at 17:14
That would be too rigid. I want to do A/B test on overlay color. — LittleLebowski, Sep 15 '13 at 17:15
Use the developer tools in your favorite browser! Then you will see, that it is simply achieved by a background-image and a background-color with transparency by using RGBA: `.home-page {background: none repeat scroll 0 0 rgba(39, 62, 84, 0.82);` — Netsurfer, Sep 15 '13 at 17:20

score 71 · Accepted Answer · edited Feb 06 '21 at 11:10

71

You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

edited Feb 06 '21 at 11:10

MaxiGui

6,190
4
16
33

answered Sep 15 '13 at 17:22

Ramin Omrani

3,673
8
34
60

1

Note the importance of z-index on this one :) – vishnu Sep 21 '18 at 09:35
1

I'd also like to point out that you can use hsla() or hex with alpha – corn on the cob Oct 11 '20 at 16:48

Ahmad Moghazi · Answer 2 · 2022-06-09T15:59:05.917

You can do that in one line of CSS.

background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;

You can also modify the opacity of a color by hovering over it in VS Code and clicking on it to make it a hex color. It can be shortened to (#3204fde6, #9907fae6) instead of the rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902).

header {
  height: 100vh;
  width: 100%;
  color: white;
  font: bold 6.5em/2em monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
}

<header>Hello World</header>

See here CodePen

score 15 · Answer 3 · answered Aug 24 '18 at 18:53

You may use negative superthick semi-transparent border...

.red {
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: -100px;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

This solution requires you to know exact sizes of covered object.

Lewis Donovan · Answer 4 · 2020-03-16T13:29:07.160

You could use the hue-rotate function in the filter property. It's quite an obscure measurement though, you'd need to know how many degrees round the colour wheel you need to move in order to arrive at your desired hue, for example:

header {
    filter: hue-rotate(90deg);
}

Once you'd found the correct hue, you could combine the brightness and either grayscale or saturate functions to find the correct shade, for example:

header {
    filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}

The filter property has a vendor prefix in Webkit, so the final code would be:

header {
  -webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
          filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}

Here's a useful tool to generate the filter properties for you: https://angel-rs.github.io/css-color-filter-generator/ — Gavin, Aug 04 '23 at 12:52

corn on the cob · Answer 5 · 2020-10-03T17:09:52.177

8

Here's a creative idea using box-shadow:

#header {
    background-image: url("apple.jpg");
    box-shadow: inset 0 0 99999px rgba(0, 120, 255, 0.5);
}

What's happening

The background sets the background for your element.
The box-shadow is the important bit. It basically sets a really big shadow on the inside of the element, on top of the background, that is semi-transparent

edited Oct 03 '20 at 17:09

answered Oct 03 '20 at 16:46

corn on the cob

2,093
3
18
29

3

Saved my day with `box-shadow`, many thanks – Bassam Apr 20 '21 at 23:24
Brilliant! Best answer. – Tsar Bomba Feb 03 '22 at 12:40
Note that it doesn't correctly work in Chrome / Edge atm.: https://stackoverflow.com/q/72157120/6841224 – Mr Patience Dec 19 '22 at 21:58

Tammibriggs · Answer 6 · 2021-10-04T17:37:04.570

7

To add an overlay, you can use the CSS background-blend-mode property something like this:

#header {
  background: url("img/image.jpg") 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  background-color: hsl(206, 27%, 38%);
  background-blend-mode: multiply;
}

edited Oct 04 '21 at 17:37

answered Oct 04 '21 at 17:32

Tammibriggs

399
5
11

This answer works well with backgrounds that already have the image applied, such as a Wordpress div that had the background image assigned in the page builder. In that case, you can omit the: "background: url..." – mHenderson Mar 22 '22 at 17:00

score 6 · Answer 7 · edited Jan 16 '23 at 14:32

6

#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    -webkit-opacity: 20%;
    opacity: 0.20;
    z-index: 2;
}

Something like this. Just add the overlay class to the header, obviously.

edited Jan 16 '23 at 14:32

Mark

6,762
1
33
50

answered Sep 15 '13 at 17:18

DevlshOne

8,357
1
29
37

1

If I do this, the content of my header becomes dim too coz of the opacity. Any workaround? – LittleLebowski Sep 15 '13 at 17:23
1

What you may have to do is create two `absolutely` positioned elements on top one another. One with the image and the other with overlay color. – DevlshOne Sep 15 '13 at 17:27

mindfullsilence · Answer 8 · 2022-01-26T18:39:19.203

Use mutple backgorund on the element, and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value.

Note that layers in a multi-background declaration are read much like they are rendered, top-to-bottom, so put your overlay first, then your bg image:

#header {
  background: 
    linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)),
    url(../img/bg.jpg) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}

Zeroox · Answer 9 · 2020-04-26T17:56:22.443

4

You can also add an additional class with such settings. Overlay will not overlap content and no additional tag is needed

.overlay {
  position: relative;
  z-index: 0;
}

.overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    opacity: .6;
    /* !!! */
    z-index: -1;
}

https://codepen.io/zeroox003/pen/yLYbpOB

edited Apr 26 '20 at 17:56

answered Apr 26 '20 at 17:50

Zeroox

41
3

score 1 · Answer 10 · answered Apr 24 '20 at 13:30

If you want to just add a class to add the overlay:

span {
  padding: 5px;
}

.green {
  background-color: green;
  color: #FFF;
}

.overlayed {
  position: relative;
}

.overlayed::before {
  content: ' ';
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00000080;
}

.stand-out {
  position: relative;
  z-index: 2;
}

<span class="green overlayed">with overlay</span>
<span class="green">without overlay</span>
<br>
<br>
<span class="green overlayed">
  <span class="stand-out">I stand out</span>
</span>

Important: the element you put the overlayed class on needs to have a position set. If it doesn't, the ::before element will take the size of some other parent element. In my example I've set the position to "relative" via the .overlayed rule, but in your use case you might need "absolute" or some other value.

Also, make sure that the z-index of the overlayed class is higher than the ones of the eventual child elements of the container, unless you actually want for those to "stand out" and not be overlayed (as with the span with the stand-out class, in my snippet).

score 0 · Answer 11 · answered Sep 15 '13 at 17:26

If you don't mind using absolute positioning, you can position your background image, and then add an overlay using opacity.

div {
    width:50px;
    height:50px;
    background:   url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}

.overlay {
   background:red;
   opacity:.5;
}

See here: http://jsfiddle.net/4yh9L/

score 0 · Answer 12 · edited Jun 20 '20 at 09:12

0

In helpshift, they used the class home-page as

HTML

<div class="page home-page">...</div>

CSS

.home-page {
    background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

you can try similar like this

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 15 '13 at 17:35

Thillai Narayanan

4,766
5
32
39

How to overlay image with color in CSS?

Objective

Code

12 Answers12

What's happening

HTML

CSS

Linked