jquery set background gradient with image doesn't work with css()

Question

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/

Gust van de Wal · Accepted Answer · 2016-01-28 01:51:09Z

1

From jQuery 1.8.8 on, it prefixes for you, so all you'll need to type is

$('#deco').css({
    'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,.65) 100%), url(' + img + ')'
})

Also. If you type something like this

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

The object won't work like you desire in some browsers. You will simply rewrite 'background-image' 4 times, essentially writing useless code.

edited Jan 28, 2016 at 1:51

answered May 30, 2015 at 2:16

Gust van de Wal

5,3031 gold badge27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrick Hallisey Over a year ago

Internet Explorer doesn't support duplicate keys in a javascript object. Even in Chrome, given value = { foo: 0, foo: 1 }; Object.keys(value) returns ['foo'] value['foo'] === 1 The first value, 0, is replaced by the second, 1.

Patrick Hallisey Over a year ago

Unfortunately, we can only use jQuery's vendor prefixing for property names. It never attempts to prefix anything in the value.

Patrick Hallisey · Accepted Answer · 2016-01-29 05:20:58Z

1

JQuery's css function doesn't accept a set of objects in a single call.

Instead of

$(...).css({},{},{})

Try

$(...).css({})
  .css({})
  .css({})

var img = 'http://i.imgur.com/Hsban3N.jpg';

$('#deco').css({
'background-image': '-moz-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')'
}).css({
'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 + ')'
}).css({
'background-image': '-webkit-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')'
}).css({
'background-image': '-o-linear-gradient(top,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')'
}).css({
'background-image': 'linear-gradient(to bottom,rgba(0,0,0,0)80%,rgba(0,0,0,0.65)100%), url(' + img + ')'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="deco">123</div>

edited Jan 29, 2016 at 5:20

answered Jan 27, 2016 at 19:56

Patrick Hallisey

9436 silver badges12 bronze badges

6 Comments

Gust van de Wal Over a year ago

It does accept one object with multiple properties, though. So having a lot of .css()s isn't necessary

Patrick Hallisey Over a year ago

In this case, it's required. Because the property name is the same in each .css call, we're unable to combine them into a single multi-property call.

Gust van de Wal Over a year ago

It still isn't required, because having multiple .css() calls with the same property will only just override the previous ones

Patrick Hallisey Over a year ago

each rule is conditionally accepted by the browser which is required for cases like multiple vendor prefixes. the last one accepted as valid by the browser is the one that sticks

Gust van de Wal Over a year ago

Didn't know about that! Does this also work for the two -webkit- ones?

|

hackernewbie · Accepted Answer · 2020-08-20 05:54:41Z

1

This is how I did this and it seems to be working fine on both FF and Chrome.

var img = $(".stall-banner-img").val();
  $(".stall-page-banner").css({
    'background-image': 'linear-gradient(to bottom,rgba(82, 75, 75, 0.5)80%,rgba(34, 32, 32, 0.5)100%), url(' + img + ')'
  });

answered Aug 20, 2020 at 5:54

hackernewbie

1,71223 silver badges13 bronze badges

Comments

mpallansch · Accepted Answer · 2015-05-30 02:08:53Z

-1

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

answered May 30, 2015 at 2:08

mpallansch

1,1946 silver badges16 bronze badges

2 Comments

Patrick Hallisey Over a year ago

Internet Explorer doesn't support duplicate keys in a javascript object.

Patrick Hallisey Over a year ago

Duplicate property names cause a syntax error in ECMAScript 5 strict mode. ECMAScript 2015 removes the restriction, but still, the last property overrides the prior. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

jquery set background gradient with image doesn't work with css()

4 Answers 4

2 Comments

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related