Setting background-image using jQuery CSS property

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?

Solutions/Answers:

Solution 1:

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

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

Solution 2:

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.

Solution 3:

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

Solution 4:

Here is my code:

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

Enjoy, friend

Solution 5:

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

Solution 6:

For those using an actual URL and not a variable:

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