Q:

How to put darkness to an image?

I am creating a masthead component where the proper background should be like this

but right now it looks like this

And this is how I am attaching that image
<div class="bg_image"
     style="background-image: url('images/driver_rewards/masthead_desktop.jpg')"></div>

css
.bg_image{
    width: 100%;
    min-height: 503px;
    background-repeat: no-repeat;
    background-size: cover;
}

Any suggestions?

A:

You can use a filter and set the brightness:
.bg_image{
    width: 100%;
    min-height: 503px;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}

