How to put darkness to an image?

Question

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?

You can't darken the image in an image editor? One option would be to overlay an element over your image and make it translucent via `opacity` — j08691, Dec 21 '16 at 19:19
You can apply an overlay on top of the background using a pseudo element which you can apply opacity on. — connexo, Dec 21 '16 at 19:20
does the background-image style need to be inline, or can you move it to the CSS `.bg_image`? — andi, Dec 21 '16 at 19:23
Refer to the [CSS opacity](http://www.w3schools.com/css/css_image_transparency.asp) and find the title : "Text in Transparent Box" you can get an idea.. — wooer, Dec 21 '16 at 19:25

score 2 · Accepted Answer · answered Dec 21 '16 at 19:22

2

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%);
}

answered Dec 21 '16 at 19:22

baao

71,625
17
143
203

I am using scss. Isn't necessary the webkit thing right? – Non Dec 21 '16 at 19:35
1

@NietzscheProgrammer supposed you use an autoprefixer, no it's not – baao Dec 21 '16 at 19:36
1

Thanks bro! It works perfect. – Non Dec 21 '16 at 19:37
You're welcome. @NietzscheProgrammer – baao Dec 21 '16 at 19:38

connexo · Answer 2 · 2016-12-21T19:32:34.513

You can apply an overlay on top of the background using a pseudo element which you can apply opacity on.

.bg {
  width: 300px;
  height: 200px;
  background: transparent url(//lorempixel.com/300/200) no-repeat 0 0;
  position: relative;
}
.bg > * {
  z-index: 3;
  color: white;
  position: relative;
}
.bg.darken::before {
  display: block;
  content: "";
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: black;
  opacity: .5;
}

<div class="bg">
  <h2>Without pseudo element for darkening</h2>
</div>
<div class="bg darken">
  <h2>With pseudo element for darkening</h2>
</div>

How to put darkness to an image?

2 Answers2