CODEWITHSUNDEEP
jquerycsslinear-gradients
natlee75
natlee75

Reputation: 5197

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

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.

Upvotes: 7

Views: 4711

Answers (3)

Sam Martin
Sam Martin

Reputation: 1248

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

Upvotes: 5

mutex
mutex

Reputation: 7738

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)"});
});

Upvotes: 0

Meenakshi
Meenakshi

Reputation: 121

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>

Upvotes: 0

Related Questions