How to put a gray overlay on an image in CSS

Question

I'd like to create a website that has a banner on every page with an image that has a gray overlay. In that way, white text on the image becomes more visible. The result should look exactly like this: http://skoopopweg.weebly.com/programma.html.

I found ways to dull the image, but not to put an overlay on top of it. Can anybody help?

This is my code in CSS for this class of images thus far:

.img-with-overlay{width:100%; position:relative;}

And in html:

<img class="img-with-overlay" src="img1.jpg" />

Answer 1

I found this to work well.

#your-img-id {
   filter: brightness(30%);
}

Not quite as flexible but very simple for this use case.

Answer 2

the idea:

• use a div as a wrapper with position: relative
• use a div as an overlay with position: absolute and background-color (you can change the first 3 values to set RGB color and the 4rth for the opacity level)

.img-wrapper {
  position: relative;
  width: 100%;
  font-size: 0;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128,128,128,0.75);
}

.img-wrapper img {width: 100%;}

<div class="img-wrapper">
  <div class="img-overlay"></div>
  <img src="https://raw.githubusercontent.com/tgogos/CS_comics/master/imgs/106-tech-debt.png">
</div>