Use css gradient over background image

Question

I am trying to use a linear gradient on top of my background image to get a fading effect at the bottom of my background from black to transparent, but can't seem to show it.

I read other cases here and examples, but none of them work for me. I can only see the gradient or image, but not both. Here is the link

Just click on the first logo, ignore this effect, what I'm trying is in the body on 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))); } 

Answer 1

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

Here is my working code:

 .css { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 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('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; height: 200px; } 

 <div class="css"></div> 

Answer 2

 body { margin: 0; padding: 0; background: url('img/background.jpg') repeat; } body:before { content: " "; width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%); } 

PLEASE NOTE: this is only used with webkit, so it will only work in webkit browsers.

try:

 -moz-linear-gradient = (Firefox) -ms-linear-gradient = (IE) -o-linear-gradient = (Opera) -webkit-linear-gradient = (Chrome & safari) 

Answer 3

The accepted answer works well. Just for completeness (and since I like it), I would like to share a compass (SCSS / SASS) with it:

 body{ $colorStart: rgba(0,0,0,0); $colorEnd: rgba(0,0,0,0.8); @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg")); } 

Answer 4

 #multiple-background{ box-sizing: border-box; width: 123px; height: 30px; font-size: 12pt; border-radius: 7px; background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425); background-repeat: no-repeat, repeat; background-position: 5px center, 0px 0px; background-size: 18px 18px, 100% 100%; color: white; border: 1px solid #e4f6df; box-shadow: .25px .25px .5px .5px black; padding: 3px 10px 0px 5px; text-align: right; } 

 <div id="multiple-background"> Completed </div>