How to add color overlay on an image

Question

So I have an image. I need to put a color overlay rgba(56, 59, 64, 0.7) on top of this image.

HTML:

<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

CSS:

.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}

.home img {
  width: 100%;
  padding: 0;
  margin: 0;
}

<div class="home">
   <img src="http://via.placeholder.com/350x150" />
</div>

Put another div in the `.home` div, make it the same size and fill it with that colour (use `z-index` if you have to) — marcellothearcane, Jun 21 '17 at 10:37
Check this out: https://stackoverflow.com/questions/18815157/how-to-overlay-image-with-color-in-css — anonymous, Jun 21 '17 at 10:40

score 11 · Accepted Answer · answered Jun 21 '17 at 10:40

11

Here you go

.home {

}

img {
  width: 100%;
  padding: 0;
  margin: 0;
  display:block;
}

.wrap {
  position:relative;
}

.wrap:before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: rgba(0,0,0,0.5);
  z-index:999;
}

<div class="home">
<div class="wrap">
   <img src="http://via.placeholder.com/350x150" />
 </div>
</div>

answered Jun 21 '17 at 10:40

RacoonOnMoon

1,556
14
29

why add another div ? if you can use the `home` div ? – Mihai T Jun 21 '17 at 10:40
@MihaiT his assumption was correct, there will be some other content in home. Granted, both answers are correct, but Traver's was more spot on for my case. – Ali Almohsen Jun 21 '17 at 10:45
@AliAlmohsen well if that is the case, you should give that info in the question :). We don't ( at least i don't ) have a crystal ball to know what's going on in your html structure – Mihai T Jun 21 '17 at 10:46

score 5 · Answer 2 · answered Jun 21 '17 at 10:38

You can use pseudo-elements like before and absolute position it on top of the image

Added a blue background color for example purposes , so you can see it better, but you can use any color with opacity

img {
  width: 100%;
  padding: 0;
  margin: 0;
}
.home {
 position:relative;
}
.home:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,255,0.5);
}

<div class="home">
  <img src="http://via.placeholder.com/350x150">
</div>

score 0 · Answer 3 · answered Jun 21 '17 at 10:42

HTML

    <div class="home">
       <img src="mango.jpg" />
        <div class="overlay"></div>
    </div>

SCSS

.home {
    position: relative;
    img {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(56, 59, 64, 0.7);
    }
}

How to add color overlay on an image

3 Answers3