html – Darken CSS background image?

html – Darken CSS background image?

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;
}

Heres 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>

html – Darken CSS background image?

Leave a Reply

Your email address will not be published.