jQuery - Change Background Image With Variable?

Question

I'm trying to add a CSS background image with jQuery but can't seem to figure out how. I THINK I'm along the right lines but I'm not sure...

var bgImg = "http://www.domain.com/my-image.jpg";

$('#myBanner').css("background", "url("+bgImg+");");

Here's a fiddle of it not working: http://jsfiddle.net/qLqvtkp3/

Any help would be great!!

^^ This. All the other answers are overkill and not highlighting the actual problem. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Oct 1, 2014 at 13:23
@Karl-AndréGagnon You should post it as an answer so he can accept it. It's the only clear explanation on the page. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Oct 1, 2014 at 13:24

Karl-André Gagnon · Accepted Answer · 2014-10-01 13:27:50Z

5

You need to remove the ; in the string. it make the rule invalid and jQuery doesn't add invalid rule in the style attribute.

$('#myBanner').css("background", "url("+bgImg+")");

http://jsfiddle.net/qLqvtkp3/17/

answered Oct 1, 2014 at 13:27

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

4 Comments

SSA Over a year ago

+1, Good spotting, I thought along with css color etc, OP wanted background image then it should be background-image.

Karl-André Gagnon Over a year ago

@SSA it depend, he may want to override the entire background property. In other word, doesn't want the pink background.

SSA Over a year ago

Exactly, I thought it differently then you did. You already got +1 from me for spotting ';'.

Karl-André Gagnon Over a year ago

@SSA And i'm thankful for that! Anyway, it is good to mention it so the OP know the possibilities.

SSA · Accepted Answer · 2014-10-01 13:15:57Z

3

This will do:

$('#myBanner').css({
                "background-image": "url('" + bgImg + "')"
});

Fiddle

answered Oct 1, 2014 at 13:15

SSA

5,4834 gold badges39 silver badges52 bronze badges

Comments

Karl-André Gagnon · Accepted Answer · 2014-10-01 13:20:07Z

3

Replace background with background-image

$('#myBanner').css("background-image","url('"+bgImg+"')");

edited Oct 1, 2014 at 13:20

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

answered Oct 1, 2014 at 13:16

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

collab-with-tushar-raj · Accepted Answer · 2014-10-01 13:35:29Z

1

Problems in your code :-

1)-You have concatenated your strings in the wrong way.

2)-You used background .You should use background-image.

3)-You have written ; in your jQuery css code ( "url("+bgImg+");") )

Try this :-

 var bgImg = "http://www.domain.com/my-image.jpg";

 $('#myBanner').css({"background-image":"url('"+bgImg+"')"});

edited Oct 1, 2014 at 13:35

answered Oct 1, 2014 at 13:17

collab-with-tushar-raj

1,31211 silver badges22 bronze badges

6 Comments

collab-with-tushar-raj Over a year ago

cummon ..then what should be the solution ..you tell @Karl-AndréGagnon

Karl-André Gagnon Over a year ago

See my comment on the question!

collab-with-tushar-raj Over a year ago

yeah .. but i wrote it correct @Karl-AndréGagnon . Why you downvoted ?

Reinstate Monica Cellio Over a year ago

Totally incorrect syntax. It should either be an object (wrapped with {}) or 2 parameters. In fact, the only thing wrong with the code in the original question is the trailing ; in the 2nd parameter.

Reinstate Monica Cellio Over a year ago

Pay closer attention - it uses object notation.

|

Collectives™ on Stack Overflow

jQuery - Change Background Image With Variable?

4 Answers 4

4 Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related