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?

you need to overlay a div on the background and give it gradient or rgba — Araz Shamsaddinlouy, Oct 25 '16 at 12:17
Here is the same question: http://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image — Dumitru, Oct 25 '16 at 12:19
Your code in both instances works perfectly for me [here](http://codepen.io/anon/pen/BLbYBJ) and [here](http://codepen.io/anon/pen/bwkLbv) on Codepen. — Martin, Oct 25 '16 at 12:21

Abk · Accepted Answer · 2016-10-28T05:52:30.807

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>

[Try CodePen](http://codepen.io/anon/pen/wzOyWj) (as it doesn't seem to work on jsFiddle) — Martin, Oct 25 '16 at 12:33

Darkening a CSS background image

1 Answers1