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

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.