0

In my project, I have a div and I set the background of it to an image. I now want to add a dark overlay to this image.

I have attempted to implement other solutions on the web, however I was unsuccessful when trying.

Here is my existing code:

<div class="bgDiv">
</div>

 .bgDiv {
    width: 100%;
    height: 88vh;
    position: relative;
    background: url("https://images.porffrrf.com/ededd/dedede444334ffr0") no-repeat center center/cover;

}

Does anybody know how to implement this functionality? Thank you.

NodeReact020
  • 486
  • 5
  • 23
  • 4
    Does this answer your question? [Black transparent overlay on image hover with only CSS?](https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css) – admcfajn Dec 30 '19 at 21:32

2 Answers2

2

You can add linear-gradient to your background property:

 .bgDiv {
    width: 100%;
    height: 88vh;
    position: relative;
    background: linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ), url("https://www.esa.int/var/esa/storage/images/esa_multimedia/videos/2018/05/mars_sample_return/17493376-1-eng-GB/Mars_sample_return_pillars.jpg") no-repeat center center/cover;

}
<div class="bgDiv">
</div>
Evik Ghazarian
  • 1,803
  • 1
  • 9
  • 24
1

An absolute child can be used to fill the entire parent and give it an so called overlay.

 .bgDiv {
    width: 100%;
    height: 88vh;
    position: relative;
    background: url("https://images.unsplash.com/photo-1562887042-ed962a48feaa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80") no-repeat center center/cover;

}

.overlay{
  position: absolute;
  background-color: black;
  height: 100%;
  width: 100%;
  opacity: 0.5;
}
<div class="bgDiv">
<div class="overlay">

</div>
</div>
MaartenDev
  • 5,631
  • 5
  • 21
  • 33