Setting background-image using jQuery CSS property

Question

I have an image URL in a imageUrl variable and I am trying to set it as CSS style, using jQuery:

$('myObject').css('background-image', imageUrl);

This seems to be not working, as:

console.log($('myObject').css('background-image'));

returns none.

Any idea, what I am doing wrong?

No, its not setting it properly. I am logging it and it is just not changing. — Blankman
– Blankman, Commented Feb 4, 2009 at 16:16
The first time jQuery doesn't try to guess what the user meant. — gblazex
– gblazex, Commented Jan 22, 2011 at 12:30

Dessa Simpson · Accepted Answer · 2018-03-12 19:04:28Z

993

You probably want this (to make it like a normal CSS background-image declaration):

$('myObject').css('background-image', 'url(' + imageUrl + ')');

edited Mar 12, 2018 at 19:04

Dessa Simpson

1,2872 gold badges15 silver badges31 bronze badges

answered Feb 4, 2009 at 16:15

Greg

323k55 gold badges378 silver badges338 bronze badges

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

3 Comments

pmartin Over a year ago

I was doing it this way - but a space between 'url' and the left parentheses was causing my code to fail. Copy/pasted yours and realized the issue. Thanks!

Gaston Coroleu Over a year ago

I using your code in this script but get me background-image: url((unknown)); This is my script: var bg_img = jQuery('.wp-show-posts-inner').attr('data-src'); jQuery('.wp-show-posts-inner').on('mouseover',function() { jQuery('.home-banner .bg').css('background-image', 'url(' + bg_img + ')'); }); Any idea why?

ankur_rajput Over a year ago

url(<your url>) is not working for me. The value must be inside quotes i.e. url("<your url>") or url('<your url>').

Arosboro · Accepted Answer · 2011-03-10 17:07:52Z

79

You'll want to include double quotes (") before and after the imageUrl like this:

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

This way, if the image has spaces it will still be set as a property.

answered Mar 10, 2011 at 17:07

Arosboro

1,04510 silver badges15 bronze badges

5 Comments

Arosboro Over a year ago

in that case, it should be $('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

nullability Over a year ago

Quotes are not necessary: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

Ghost Echo Over a year ago

This solved it for me. I needed to have the double quotes. My image names do contain spaces. Otherwise, nothing would occur. I could get something like $('.myObject').css('background-color', 'green'); to work, but not change the image without double quotes. Thanks!

Nicolas Garnier Over a year ago

encodeURIComponent won't work if part of your URL already contained URL escaped characters. You should escape potential double quote character in imageUrl though: $('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

Daerik Over a year ago

By the by, doing $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')'); gave me background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

Kon · Accepted Answer · 2011-07-02 18:16:48Z

48

Alternatively to what the others are correctly suggesting, I find it easier usually to toggle CSS classes, instead of individual CSS settings (especially background image URLs). For example:

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

answered Jul 2, 2011 at 18:16

Kon

27.5k12 gold badges64 silver badges87 bronze badges

6 Comments

calumbrodie Over a year ago

This is a much better way to do things because it lets you use a css pre processor.

Jimbali Over a year ago

This is great, much better than the more direct solution.

sheriffderek Over a year ago

This is going to load both images though.

Anne van Rossum Over a year ago

Is this actually a recommended solution? It seems like this unnecessarily requires more information, e.g. in case there is a third possible background image, you will need to remove all other background images, or alternatively keep track of the "current" image. And also to have configuration details, such as these URIs in the .css files drives me crazy. :smiley: I have to search all over the code!

Evan Langlois Over a year ago

Using classes like this is also my preference since it lets you keep a clean seperation between code and style. I can then change all my images and animations in the css (via media selectors and such) without messing about with the code. You don't have to search all over the code if you keep your images OUT of the code!

|

Apo · Accepted Answer · 2011-07-02 18:10:53Z

16

Here is my code:

$('body').css('background-image', 'url("/apo/1.jpg")');

Enjoy, friend

answered Jul 2, 2011 at 18:10

Apo

1791 silver badge2 bronze badges

Comments

Matt Parkins · Accepted Answer · 2013-02-27 15:37:50Z

13

Further to the other answers, you can also use "background". This is particularly useful when you want to set other properties relating to the way the image is used by the background, such as:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");

answered Feb 27, 2013 at 15:37

Matt Parkins

24.8k9 gold badges54 silver badges62 bronze badges

1 Comment

Matt Parkins Over a year ago

This answer made more sense when I thought the original op had used background not background-image. I've modified my answer to make more sense, and I'll leave this here for posterity anyway.

Prid · Accepted Answer · 2021-10-02 01:49:10Z

12

The problem I was having, is that I kept adding a semi-colon ; at the end of the url() value, which prevented the code from working.

❌ NOT WORKING CODE:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');
//--------------------------------------------------------------------------^

✅ WORKING CODE:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

Notice the omitted semi-colon ; at the end in the working code. I simply didn't know the correct syntax, and it's really hard to notice it. Hopefully this helps someone else in the same boat.

edited Oct 2, 2021 at 1:49

answered Jul 12, 2019 at 16:42

Prid

1,69423 silver badges26 bronze badges

1 Comment

Vishal Kumar Sahu Over a year ago

This works perfectly as jQuery can append it to style property.

Pang · Accepted Answer · 2018-01-25 04:07:39Z

7

For those using an actual URL and not a variable:

$('myObject').css('background-image', 'url(../../example/url.html)');

edited Jan 25, 2018 at 4:07

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Oct 1, 2013 at 0:36

Dusty

1,0933 gold badges11 silver badges24 bronze badges

Comments

appcropolis · Accepted Answer · 2017-05-29 02:37:59Z

4

Try modifying the "style" attribute:

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

answered May 29, 2017 at 2:37

appcropolis

4165 silver badges8 bronze badges

1 Comment

melvin Over a year ago

will replace all other styles. Not recommended

Antony · Accepted Answer · 2019-10-01 11:54:54Z

3

Don't forget that the jQuery css function allows objects to be passed which allows you to set multiple items at the same time. The answered code would then look like this:

$(this).css({'background-image':'url(' + imageUrl + ')'})

answered Oct 1, 2019 at 11:54

Antony

4,4321 gold badge34 silver badges43 bronze badges

1 Comment

Avatar Over a year ago

This should be upvoted. Totally got used to the syntax .css( {...} )

Sushanth -- · Accepted Answer · 2017-02-18 01:47:14Z

2

String interpolation to the rescue.

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);

answered Feb 18, 2017 at 1:47

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

wahaj · Accepted Answer · 2017-08-02 23:28:27Z

-3

$('myObject').css({'background-image': 'url(imgUrl)',});

answered Aug 2, 2017 at 23:28

wahaj

1

1 Comment

Sal Over a year ago

This won't work because the url is encased in single quotes.

Collectives™ on Stack Overflow

Setting background-image using jQuery CSS property

11 Answers 11

3 Comments

5 Comments

6 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

5 Comments

6 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

1 Comment

Linked

Related