background needs to have gradient - css

Question

I am totally a noob to css and I have a need to add gradient to the background image on the top of the page.
here is what I tried but obviously its not working as background overwriting the value. How can I fix it
I have a background image and I need a gradient on top of it. Here is my css
body.test {
/* Mozilla: */
background: -moz-linear-gradient(top, #00FF00, #000000);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#00FF00), to(#000000));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
background: url(../mybackground.png);
}
TEST HERE
http://jsfiddle.net/PsDuF/

Answer 1

First, have a look at this tool for creating CSS gradients.

Answer 2

change
background: url(../mybackground.png);
to
background-image: url(../mybackground.png);
background is the shorthand syntax. Alternatively, you could combine the image with your other syntax:
background: url(../mybackground.png), -moz-linear-gradient(top, #00FF00, #000000);
In your case, you are declaring background multiple times, so each time you declare it, you are over-riding the previous declaration.
When you declare multiple background in one declaration, the order you declare them will change the stacking order. JSBIN example using images and mozilla background gradients: jsbin.com/abumuz/1
Note that if you want the gradient on top of the image, but still want to see the image, you need to make sure your gradient has alpha transparency.