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


Tags: jquery,css3,linear-gradients

Problem :

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.



Solution :

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


    CSS Howto..

      list only showing contents of first
    • , ignoring second

    How can I make my an image?

    How to style this with css? [closed]

    Divs are overlapping, how to fix? CSS

    How to changing css on bootstrap button Group

    How to make Css transition effect work on Safari and Chrome?

    How to COLOR lower-roman ordered list style in html with just css?

    CSS: How to float 3 divs side by side for width:100% without messing up?

    JQuery : How to disable mouse move vertically?

    How to Make Glossy Colors in CSS. [closed]

    How to Minify CSS to its Absolute Minimalistic Essence?

    How to move items left and right in an html table using css? -

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    How to create animated element that follows browser like on http://metalab.co/projects/swivl/? [closed]

    How can I set a css property to tags with specific attribute?

    How to replace @media (max-width) using Stylish or Greasemonkey?

    how to remove the css overflow:hidden of jquery dialog

    how to wrap a text around a image?

    How to turn off materialize css containers when on mobile?

    How do I center align a div that contains floated elements?

    How to cut down HTTP request on js/css in laravel

    How do I get Html Table to respect margins when its width is set to 100%?

    How to center a navigation bar properly? [closed]

    PHP: How to add a CSS text-align property to an already present inline style attribute of an element using simple_html_dom parser?

    How to count the number of correct answers using Javascript?

    how to use automatic css hyphens with word-break: break-all?

    How can I move text to the left with CSS?

    How to set CSS3 ::selection using Javascript

    How to position button in the middle

    How to wrap table cell at a maximum width in full width table