7

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.

natlee75
  • 5,097
  • 3
  • 34
  • 39

3 Answers3

5

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

Sam Martin
  • 1,238
  • 10
  • 19
  • I discovered the "top" -> "left top" solution last night after I posted my question. I never really thought of the double css method call which worked out for me so thanks a lot for that! I can actually use the backgroundImage property, and I'm kind of surprised that background would work for you since I read somewhere that jQuery doesn't accept the "combo" styles in its css method (maybe that changed in the latest version of the library). I'm also able to use black and white instead of #000000 and #ffffff. Oh, and the missing parentheses was just a typo for this example. :-) Thanks again!! – natlee75 Sep 09 '11 at 15:17
0

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>
Meenakshi
  • 121
  • 8
0

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. I.e. 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)"});
});
Community
  • 1
  • 1
mutex
  • 7,536
  • 8
  • 45
  • 66
  • I had the same issue. After I tried the double css method call as suggested by you and Toukakoukan everything seemed to work fine. It seems as if perhaps the "map"/"object" version of the css method call simply replaces each included style in order as the last one in the object is always the one that gets used. – natlee75 Sep 09 '11 at 15:28