CODEWITHSUNDEEP
htmlcssbackground-imageopacity
Monica
Monica

Reputation: 1070

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?

Upvotes: 3

Views: 5016

Answers (1)

Abk
Abk

Reputation: 2233

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>

Upvotes: 1

Related Questions