Question

Let’s say I have #button with a given background-image:url(images/some_background) and I want to change it to another background when I click it, let’s say url(images/other_background).

        HTML

         <a id="button" ></a> 

        CSS

     display: block; 
     height:100px;
     width:100px;
     background-image:url(images/other_background.png)

I tried this, but it doesnt work :

    $(document).ready(function(){

    $('#button').click(function(){

            $('#button').css('backgroundImage', 'url(images/other_background.png)');

        });

});

Answer 1

This works for me

CSS

#button{display: block; height:100px; width:100px;  
background-image:url(http://cheeptalk.files.wordpress.com/
2009/05/smurfs-hefty-smurf-100x100.png?w=96&h=96); border:1px solid red;}

border to see easier only

code

$('#button').click(function(){
    $(this).css('backgroundImage','url(http://images.mirror.co.uk/upl/m4/\
    feb2010/9/3/mr-t-100x100-938742195.jpg)');
});

http://jsfiddle.net/jasongennaro/Lvnmw/

Obviously, you will need to switch out the images for your own.

If you are having trouble, check

1. That you are calling the jQuery script first, before this script.

2. That the path to your images is correct.