How do I set the background-image property to a linear gradient using jQuery's css method?

Question

When I use this on my page the background gradient doesn't appear (I'm only worried about Safari and Firefox at the moment):

$("#myElement").css({
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
    backgroundImage: "-moz-linear-gradient(top, black, white)"
});

I tried using just one or the other as well in the appropriate browsers, but no luck there.

I can just use an inline style attribute for the element in my code, but I'd rather not do it that way if there's a way to do it using jQuery's API.

Answer 1

The following works for me.

$("#myElement").css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF))"}).css({
    background: "-moz-linear-gradient(top, black, white)"
});

jsFiddle Demo

Changes:

• background instead of backgroundImage
• top, bottom to: left top, left bottom
• missing closing parentheses from the webkit gradient
• changed black and white to #000000 and #FFFFFF
• added a second .css

Tested on Chrome and FF 6