Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 103 down vote favorite
14

I have a URL in a variable, and I am having issues setting the value in CSS.

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

// $('myObject').css('background-image'); returns 'none'

Any pointers?

share|improve this question
 
What exactly is the issue? Is Jquery throwing an error? –  Mike_G Feb 4 '09 at 16:14
 
No, its not setting it properly. I am logging it and it is just not changing. –  Blankman Feb 4 '09 at 16:16
 
The first time jQuery doesn't try to guess what the user meant. –  galambalazs Jan 22 '11 at 12:30
 
What have you tried? –  Qwerty Mar 16 at 0:23

6 Answers

up vote 243 down vote accepted

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

$('myOjbect').css('background-image', 'url(' + imageUrl + ')');
share|improve this answer
7  
it's the simple things that cause these unsolvable errors...I forgot to put in url() hahaha....thanks greg, thanks SO –  d-_-b Jun 17 '12 at 0:45
 
+1: worked like a charm :-) –  Daniel Allen Langdon Dec 11 '12 at 16:56
 
from my side also +1 –  Habid Pk Mar 14 at 10:04
1  
Wow, one of those days for me. Thanks for point it out, should've thought of this! –  Jason Jul 24 at 21:16
up vote 28 down vote

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.

share|improve this answer
 
url("example.com") breaks IE7, I believe. –  Hooray Im Helping Aug 11 '11 at 15:59
2  
URLs can't have spaces in them. Spaces need to be encoded. –  Jakobud Feb 28 at 22:26
3  
in that case, it should be $('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')'); –  Arosboro Mar 2 at 3:58
2  
Quotes are not necessary: stackoverflow.com/questions/2168855/css-url-are-quotes-needed –  nullability Mar 15 at 19:13
up vote 18 down vote

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');
share|improve this answer
1  
This is a much better way to do things because it lets you use a css pre processor. –  calumbrodie Aug 17 '12 at 20:48
 
This is great, much better than the more direct solution. –  Jimpanzee Jun 7 at 14:34
up vote 5 down vote

Here is my code:

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

Enjoy, friend

share|improve this answer
1  
@lolwut, Apo's anwer IS valid. –  Caspar Kleijne Jul 3 '11 at 17:28
up vote 5 down vote

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");
share|improve this answer
 
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. –  Matt Parkins Feb 27 at 15:39
up vote 0 down vote

For those using an actual url and not a variable:

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.