CODEWITHSUNDEEP
javascriptjquerycss
Blankman
Blankman

Reputation: 266920

Setting background-image using jQuery CSS property

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?

Upvotes: 419

Views: 751199

Answers (11)

Prid
Prid

Reputation: 1624

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.

Upvotes: 12

Antony
Antony

Reputation: 4310

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

Upvotes: 3

Greg
Greg

Reputation: 321578

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

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

Upvotes: 992

Dusty
Dusty

Reputation: 1083

For those using an actual URL and not a variable:

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

Upvotes: 7

wahaj
wahaj

Reputation: 1

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

Upvotes: -3

appcropolis
appcropolis

Reputation: 416

Try modifying the "style" attribute:

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

Upvotes: 4

Sushanth --
Sushanth --

Reputation: 55740

String interpolation to the rescue.

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

Upvotes: 2

Matt Parkins
Matt Parkins

Reputation: 24688

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

Upvotes: 13

Kon
Kon

Reputation: 27431

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

Upvotes: 48

Apo
Apo

Reputation: 179

Here is my code:

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

Enjoy, friend

Upvotes: 16

Arosboro
Arosboro

Reputation: 1045

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.

Upvotes: 79

Related Questions