Update the background image with jQuery-CodePudding

In jQuery, I'm trying to change the background image of a div:

var USR_Settings_Color = $('.social-icons ul li a.active').css('background-image');
// Return : url("https://example.com/fir-DIY.jpg")

After I update the like this:

$('#preview').html('<div style="background-image: ' USR_Settings_Color '"></div>');

But the result is like this:

<div style="background-image:url(" https:="" example.com="" fir-diy.jpg");="" background-clip:="" text;="" -webkit-background-clip:="" color:="" transparent;"=""></div>

I think it's a conflict with the ' and ".

How I can solve this please ?

Thanks.

CodePudding user response：

Why do you use Html attr instead of css? try do this instead:

$('#preview').css('background-image', USR_Settings_Color)

by the way I would take all the properties you added in the html attribute, and put them in class, by this you just adding the specific div the class to keep a cleaner code.

CodePudding user response：

try use the backtag instead:

$('#preview').html(`<div style=background-image:${USR_Settings_Color}></div>`);