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

Answer 2

I tried this on Firefox 6.0.1 and it works for me

$(function() {

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

});

HTML

<div id="myElement">testing</div>

Answer 3

There may be some difference between newer and older webkit versions:

How do I combine a background-image and CSS3 gradient on the same element?

I got a little sample working with the following:

$(function(){
    $("#myElement").css("background-image", "-webkit-linear-gradient(top, #000000, #ffffff)");
    $("#myElement").css("background-image", "-moz-linear-gradient(top, black, white)");
});

here's a fiddle:

http://jsfiddle.net/Hmmpd/1/

Edit:

Odd, using the css "map" version of css work in Firefox but not my version of Chrome. Ie the following works for me in firefox but not chrome:

$(function(){
    $("#myElement").css({backgroundImage: "-webkit-linear-gradient(top, #000000,#ffffff)",backgroundImage: "-moz-linear-gradient(top, black, white)"});
});