How can I darken an image using CSS?

Question

I have an image that spans the entire screen:

<div>
  <img className="background-image" src={url} /> 

  <h1>{name}</h1>
  ... 

</div>


 .background-image {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
 }

Now, I'd like to darken the whole image. How can I do this? I tried adding a div next to the image with a black background and full width and height, but that messes up everything. All I'm trying to do is darken the image, so that the text on the page can be read easily.

Answer 1

The filter property will do it, but that isn't widely supported. I would use a pseudo element positioned absolutely over the image with an rgba() background, or a solid background combined with opacity .

 div { position: relative; display: inline-block; } div:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: black; } img { vertical-align: top; opacity: .5; position: relative; } 

 <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></div> 

Answer 2

If you don't care about IE use filter: brightness() , see can i use filters

 body { margin: 0 } div { position: relative } .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; filter: brightness(.7) } 

 <div> <img class="background-image" src="http://lorempixel.com/400/200/sports" /> </div> 

otherwise for cross browser you can use pseudo element ::after with background rgba

 body { margin: 0 } div { position: relative; } div::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7); content: ""; } img { width: 100% } 

 <div> <img class="background-image" src="http://lorempixel.com/400/1000/sports" /> </div> 

EDIT - OP's comment

The thing is I want my image to span the entire screen. This method make the image span only across the div's width and height

So use a background image instead of a image.

 body { position: relative; background: url(http://lorempixel.com/400/200/sports) no-repeat 0 0 / cover; margin: 0; height:100vh } body::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7); content: ""; } 

Answer 3

create an overly like that

like that

 .overly{
   position: absolute;
   top: 0;
   left: 0; 
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5); 
}

and put it inside your div alongside with your image or just give your container this class You can use z-index in case of layers positioning

Answer 4

Yu can also use linear gradients on images. you can use generators online for fall backs

 div{ background-image: url(https://homepages.cae.wisc.edu/~ece533/images/fruits.png); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000,endColorstr=#B3000000); background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(https://homepages.cae.wisc.edu/~ece533/images/fruits.png); background-size: cover; background-position: 50% 50%; height: 200px; width: 30%; } div+div{ background-image: url(https://homepages.cae.wisc.edu/~ece533/images/fruits.png); } 

 Darkened <div></div> Original <div></div>