Darken an image using CSS

Question

I have this div with an image background:

<div class="image-cover" style={{ backgroundImage: 'url(' + item.image + ')' }}>
      <div className="name">{item.name}</div>
</div>

(the is React code, but essentially the above div has the image applied as a background.)

I want to darken the image, possibly as a gradient so that only the bottom is dark, and fades up to normal. Almost everywhere I searched mentions adding the image as a reference in the CSS. However, in my case, the image url is known only at runtime and is applied in the html.

How can I darken my div here?

Answer 1

You can simply combine an image and a gradient, like this

 div { height: 200px; width: 500px; background-image: linear-gradient(black, transparent 20%, transparent 80%, black), url(http://lorempixel.com/500/200/nature/1/); } 

 <div></div> 

---

Or use a pseudo element, like this

 div { height: 200px; width: 500px; background: url(http://lorempixel.com/500/200/nature/1/); } div::after { content: ''; display: block; height: 200px; width: 500px; background: linear-gradient(transparent, black); } 

 <div></div> 

Answer 2

I was able to achieve that effect by using linear-gradient background on the div 's ::before pseudo-element. The idea is to cover the div with its ::before pseudo-element (or with another div , but pseudo-elements don't add any extra elements), and then applying a gradient background to the pseudo-elemetn:

.image-cover {
    position: relative;
}

.image-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Adjust the color values to achieve desired darkness */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
}

Here is a JSFiddle to show it in action.

Answer 3

Inset Box-Shadow

Advantage: slim on code, no additional pseudoelement needed

Disadvantage: Box shadow size and offset values can for current w3 standard be ONLY absolute (not percentual), therefore dynamic/various size of the shadowed element cannot be solved without JavaScript calculating elements dimensions.

There are better answers, so i am just going to throw this as an additional option (worse).

 div { display: inline-block; background:url(http://unsplash.it/200/200); width:200px; height:200px; } .darkened{ box-shadow: inset 0 -200px 200px -100px rgba(0,0,0,.9); } 

 <div></div> <div class="darkened"></div> 

Answer 4

Elements can have multiple backgrounds, and you want to set it from code?

 let imageURL = "https://i.stack.imgur.com/QqkeF.png"; // an example image let cssURL = "url( " + imageURL + ")"; // convert to CSS url declaration let gradient = "linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 0, 0, 0))"; divElement.style.backgroundImage = gradient + "," + cssURL; 

 <div id="divElement" style="height:128px; width: 256px;"> #divElement </div> 

,

Essentially convert the image URL known at run time into a CSS url declaration, create a CSS gradient pattern of your choosing and add them as a comma separated list to the backgroundImage property of the element's style attribute.

I used the global variable divElement for testing - use document.getElementById as you wish.

Edit: looking at your code, it should be fairly easy to put the background image list in the template: the stand-alone code above was written to check it worked :-)