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?
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 {_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_
}<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>Source: Stackoverflow.com