Darken CSS background image

Question

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

User · Accepted Answer

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:

_x000D_

#landing-wrapper {_x000D_
  display: table;_x000D_
  width: 100%;_x000D_
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');_x000D_
  background-position: center top;_x000D_
  height: 350px;_x000D_
  color: white;_x000D_
}

_x000D_

<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>

_x000D_

[html] Darken CSS background image?

Examples related to html

Examples related to css