htmlcssbackgroundbackground-imagegradient

Use CSS gradient over background' image


I've been trying to use a linear gradient on top of my background image, in order to get a fading effect on the bottom of my background, from black to transparent, but can't seem to be able to make it show.

I can only see the gradient or the image but not both of them.

body {
  background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}


Solution

  • Add the url for the background image at the end of the line:

    .css {
      background: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
       url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
      height: 200px;
    }
    <div class="css"></div>