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

User · Answer

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

User · Answer

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

User · Answer

For those using an actual URL and not a variable      myObject   css  background-image    url       example url html

User · Answer

myObject   css   background-image    url imgUrl

User · Answer

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

User · Answer

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

User · Answer

Here is my code      body   css  background-image    url   apo 1 jpg       Enjoy  friend

User · Answer

Try modifying the  style  attribute      myObject   attr  style    background-image  url      imageUrl

User · Answer

myObject   css   background-image    url imgUrl

User · Answer

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

User · Answer

You probably want this  to make it like a normal CSS background-image declaration       myObject   css  background-image    url     imageUrl

User · Answer

For those using an actual URL and not a variable      myObject   css  background-image    url       example url html

User · Answer

Try modifying the  style  attribute      myObject   attr  style    background-image  url      imageUrl

User · Answer

String interpolation to the rescue   let imageUrl    imageurl png      myOjbect   css  background-image    url   imageUrl

User · Answer

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

User · Answer

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

User · Answer

Here is my code      body   css  background-image    url   apo 1 jpg       Enjoy  friend

User · Answer

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

User · Answer

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

User · Answer

You probably want this  to make it like a normal CSS background-image declaration       myObject   css  background-image    url     imageUrl

User · Answer

You probably want this  to make it like a normal CSS background-image declaration       myObject   css  background-image    url     imageUrl

User · Answer

You probably want this  to make it like a normal CSS background-image declaration       myObject   css  background-image    url     imageUrl

User · Answer

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

User · Answer

String interpolation to the rescue   let imageUrl    imageurl png      myOjbect   css  background-image    url   imageUrl

[javascript] Setting background-image using jQuery CSS property

Examples related to javascript

Examples related to jquery

Examples related to css