use jquery to change css background image

Question

I'm trying to change a CSS background image using jQuery, and the code I am using just reloads the current image. When you click the li#menu-item-23, I want the div with the class of #changeMe to switch background images

$('li#menu-item-23').click(function(){
  $('#changeMe').css('background-image','url(i/logo4.png)');

});

verify your image path. It should be relative to your current URL. — Callebe
– Callebe, Commented Aug 13, 2014 at 20:33

imbondbaby · Accepted Answer · 2014-08-13 20:35:42Z

4

Try this

$('#changeMe').css('background-image', 'url("i/logo4.png")');

You need to add double quotes inside url()

JSFiddle Demo

Also make sure you image path is correct...

Here is a brief description of the file paths:

./ means the current directory

../ means the parent of the current directory, not the root directory

/ is the root directory

myfile.text is in the current directory, as is ./myfile.text

../myfile.text is one level above you and /myfile.text lives in your root directory.

answered Aug 13, 2014 at 20:35

imbondbaby

6,4313 gold badges23 silver badges54 bronze badges

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

4 Comments

ctwheels Over a year ago

Here is a fiddle for the above: jsfiddle.net/ctwheels/92m4309b/7 (You beat me to writing the answer)

hannahcreative Over a year ago

@imbondbaby still no luck unfortunately. I'm working in Wordpress, and I wonder if that is somehow affecting things. My other jQuery works fine, this is the only piece that's failing

imbondbaby Over a year ago

Wrap it around document.ready function and see if that makes a difference... Are you sure the image path is correct?

hannahcreative Over a year ago

@imbondbaby I think you're right, there's something weird going on with the image path.. haven't needed to access an image url through jQuery in WP before

Collectives™ on Stack Overflow

use jquery to change css background image

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related