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.

Answer 1

Remove the !important; .

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

Answer 2

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

Answer 3

尝试

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

Answer 4

我将其放在对CSS的单个调用中，例如：

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

Answer 5

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