How to darken a CSS background image?

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

This should work


You can set the background on body tag, and add a darken layer with pseudo content with rgba() + alpha, then wrap all the content into a div and set it to position:relative, to make it stays on top.

html, body {
    height: 100%;
    margin: 0;
}
body {
    background: url("http://lorempixel.com/400/200") center center no-repeat;
    background-size: cover;
    position: relative;
}
body:before {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    transition: background .5s;
}
body:hover:before {
    /*for demo, move this line up if you want to darken it as default*/
    background: rgba(0,0,0, .5);
}
div {
    position: relative;
    color: white;
}
<div>Hello world!</div>

Tags:

Html

Css

Recent Posts