jQuery set background image not working

Question

What could be the problem? The console shows me that the variable y contains the right absolute path of an existing external image (direct linking enabled). After the background setting font color turns to red.

console.log("image url: "+y);
       $(this).css("background","url('"+y+"') !important;");
       $(this).css("color","red");

It does not work with background-image either.

Seems to work if you remove the `!important;`... – gvee Jul 30 '13 at 12:45 — gvee, Jul 30 '13 at 12:45
Put that as an answer @gvee – putvande Jul 30 '13 at 12:46 — putvande, Jul 30 '13 at 12:46

score 4 · Accepted Answer · edited May 23 '17 at 10:31

4

Remove the !important;.

Read this if you have to use that declaration: How to apply !important using .css()?

edited May 23 '17 at 10:31

Community

1
1

answered Jul 30 '13 at 12:48

gvee

16,732
35
50

score 0 · Answer 2 · answered Jul 30 '13 at 12:40

Have you tried this?

$(this).css({
     backgroundImage:"url('"+y+"') !important"
     });

I recommend to use an object when you pass multiple css styles to the same element rather using the .css command multiple times:

$(this).css({
         backgroundImage:"url('"+y+"') !important",
         color: "red"
         });

score 0 · Answer 3 · answered Jul 30 '13 at 12:42

0

Try

$(this).css("background","url('" + y + "') !important");

answered Jul 30 '13 at 12:42

Arun P Johny

384,651
66
527
531

score 0 · Answer 4 · answered Jul 30 '13 at 12:43

0

I would put it in a single call to css like:

$(this).css({"background":"url('"+y+"') !important", "color":"red"});

answered Jul 30 '13 at 12:43

David MacCrimmon

966
1
6
19

Yes, I was about to do that, but need to fix something before optimizing code this way. – Rápli András Jul 30 '13 at 12:44

score 0 · Answer 5 · answered Jul 30 '13 at 12:53

As others have stated, it's better to pass an object rather than calling the css function several times. Also, in my opinion, it's more clear if you don't use css shorthands.

Anyways, try it with double quotes in the url.

$(this).css({'background-image':'url("'+y+'") !important', 'color':'red'});

jQuery set background image not working

5 Answers5