Use css gradient over background image

Issue

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've read other cases here and examples but none of them are working for me. I can only see the gradient or the image but not both of them. Here's the link

Just click on the first logo, ignore that effect, what I'm trying is in the body in the whole site after that.

This is my css code:

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

Ok, I solved it by adding the url for the background image at the end of the line.

Here's my working code:

.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>

Answered By - Pam