Darkening a CSS background image

Question

I'd like to darken a background picture. I had found that I have to use opacity so I wrote my css code:

body {
        width: 960px;
        margin: 0 auto;
        font-family: Georgia, Times, serif;
        background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../pics/parachute.jpg');}

Everything works fine! However when I added some flags to make a full screen background picture, my effect disappeared.

body {
        width: 960px;
        margin: 0 auto;
        font-family: Georgia, Times, serif;
        background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../pics/parachute.jpg');
        -webkit-background-size: cover;
        -moz-background-size:  cover;
        -o-background-size: cover;
         background-size: cover;}

What is the reason that it doesn't work?

Answer 1

This is how you can darken background image without loosing any effect applied.

   

    .bg{
      background: url('http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg');
      height: 500px;
      -webkit-background-size: cover;
      -moz-background-size:  cover;
      -o-background-size: cover;
       background-size: cover;
    }
    .content{
      background: rgba(0,0,0,0.4);
      color: white;
      height: inherit;
      padding-left: 10px;
    }

<div class='bg'>
        
   <div class='content'>
     <p>
        Some content Some content Some content Some                content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some 
 
    </p> 
  </div> 
 </div>