jquery set background gradient with image does not work with css ()

advertisements

This is working

div {
  width: 100px;
  height: 100px;
  background-image:
 -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.65) 100%),
  url('http://i.imgur.com/Hsban3N.jpg');
}
<div id="deco">123</div>

but why when I try to set it using css() of jquery it doesn't seem working? No error in the console at all :

http://jsfiddle.net/xcso27zk/


You are passing multiple javascript objects to the css method, but it only takes one javascript object with multiple name-value pairs. So like this:

$('#deco').css({
    'background-image': '-moz-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')',
    'background-image': '-webkit-gradient(linear,left top,left bottom,color-stop(80%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.65))), url(' + img + ')',
    'background-image': 'background-image: -webkit-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')',
    'background-image': '-o-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')',
    'background-image': 'linear-gradient(to bottom,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')'
});

with only one set of brackets