html5 – How to apply a transparent dark layer to a background image?

Question:

I am trying to apply a transparent black color to a background image to avoid strong or too flashy colors.

No need to edit the image with a special program.

I have tried applying this style:

background-color: rgba(0,0,0,0.8);

But I have not been successful.

How do I get the background image to apply a transparent black color, like a layer.

#image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
}
<div id="image"></div>

Answer:

One possibility would be to use CSS filters to change the contrast / lightness of the image. If you put a brightness between 0 and 1 the image will appear darker. Something like this example:

#image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  filter:brightness(0.4);
}
<div id="image"></div>

Another option could be to use the ::before or ::after pseudo-elements to put a semitransparent layer on top of the image to make it appear darker. For example:

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;
  color: white;
  z-index:1;
}

#image::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:-1;
}
<div id="image">
  HOLA MUNDO
</div>
Scroll to Top