Monica Monica - 1 month ago 7
CSS Question

Darkening a CSS background image

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?

Abk Abk
Answer

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>

    

Comments