174

Should be a fairly simple question. In my website I do this: 

#landing-wrapper {
    display:table;
    width:100%;
    background:url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

What I'd like to do is make the background image darker. Since I have UI elements inside this DIV I don't think I can really place another div over it to darken it. Suggestions?

Tom Maxwell
  • 9,273
  • 17
  • 55
  • 68

1 Answers1

448

You can use the CSS3 Linear Gradient property along with your background-image like this:

#landing-wrapper {
    display:table;
    width:100%;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

Here's a demo:

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
  background-position: center top;
  height: 350px;
  color: white;
}
<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>
Fahad Hasan
  • 10,231
  • 4
  • 29
  • 36
  • 4
    This does not work in IE9. Any way around that? – Brecht Machiels Sep 28 '15 at 16:21
  • @BrechtMachiels I think the best workaround for IE is to use transparent image –  Sep 04 '17 at 05:15
  • 112
    @john1717 Let's be real... the best workaround for IE is probably to not use IE – Arif Oct 22 '17 at 08:51
  • 4
    It still works under `background-image` if you are setting other background properties in different places i.e. `background-size`/`background-repeat` `background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');` – ono2012 Nov 05 '18 at 12:37
  • Thanks!!! is there also a way to rotate the image? – haneulkim Apr 13 '19 at 03:34
  • Why use a background image ? Just don't use a linear gradient and instead just give it a color of black and adjust the opacity as needed – Allen Jul 27 '19 at 06:55
  • @Ambleu I recommend you search for or ask a new question for that info. – qxotk Dec 22 '20 at 16:22
  • Agreed with @john1717, It's time to stop supporting IE altogether, especially since Microsoft Edge is now based on Chromium. – OzzyTheGiant Dec 31 '20 at 20:20
  • I tried this method with both `background` and `background-image`, and was left with a white background in both scenarios, instead of a darkened background image. Thoughts? – Ethan Leyden Jun 07 '21 at 01:47