Title: Switch Background Image onClick Last modified: August 19, 2016 --- # Switch Background Image onClick * Resolved [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/) * Hi Guys, I am making a theme that will hopefully let you change the pages background image by clicking a link on an image map. The code I am using is this: * ``` Homepage Change to Surf Background Image Change to Skate Background Image Change to Snow Background Image ``` * The page is here: [http://www.popmag.com.au/cactusblack/](http://www.popmag.com.au/cactusblack/) * The problem is it doesn’t work. I’m not sure why. If I put it into a normal HTML page it works fine, so I suspect it is something to do with WordPress and its PHP page constructing. Anyway, it’s over my head so I thought I would ask here. * There might be a better way to achieve this (like switching the entire style sheet) although this way seems the most efficient, so let me know what you think. * Thanks, Drew Viewing 9 replies - 1 through 9 (of 9 total) * Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674669) * OK, so now I have figured out that it stops working if I use CSS to set what the default background should be. So it doesn’t have anything to do WordPress then. Can anyone help with a way to switch the back ground using a link? Thanks. * Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674673) * I’ve tried using this java script, but again it only works if I don’t use the style sheet. * ``` Homepage Change to Surf Background Image Change to Skate Background Image Change to Snow Background Image ``` * Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674678) * I found this forum post that could help, but I can’t figure it out: [http://www.dynamicdrive.com/forums/showthread.php?t=26778](http://www.dynamicdrive.com/forums/showthread.php?t=26778) * Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674688) * I think this is the answer but I can’t figure it out ether. Any help? [http://csscreator.com/?q=generator/userpref.php](http://csscreator.com/?q=generator/userpref.php) * Thanks. * Moderator [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/) * (@otto42) * WordPress.org Admin * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674689) * Try using `document.body.style.backgroundImage` instead of `document.body.background`. * Alternatively, give the body a unique id in the html code and then use `document. getElementById('your-id').style.backgroundImage` instead. This may be more cross- browser compatible. * Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674830) * Thanks Otto for the help. * I tried this like you suggested and had no luck: * ``` Homepage Change to Surf Background Image Change to Skate Background Image Change to Snow Background Image ``` * (Of course I removed the PHP code first, but I am leaving it in here so you can see the end result I am going for). * Moderator [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/) * (@otto42) * WordPress.org Admin * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674843) * Do you have a link to an actual page with this code? The link you gave in the first post just returns a 404 error. * Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674850) * Sorry about that, the link is [here](http://www.popmag.com.au/cactus/). I have since changed to use the method described [here](http://csscreator.com/?q=generator/userpref.php) because it uses cookies and thus the background change will remain until the user changes it again. I have a forum post about it [here](http://csscreator.com/node/5125?page=2) because I can’t get it working either. I think it due to my onclick syntax being wrong. * Thanks again for the help. * Thread Starter [Drew Baker](https://wordpress.org/support/users/dbaker/) * (@dbaker) * [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674851) * Got it! I have it working now using the java script found here: [http://www.csscreator.com/generator/userpref.php](http://www.csscreator.com/generator/userpref.php) Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Switch Background Image onClick’ is closed to new replies. * 9 replies * 2 participants * Last reply from: [Drew Baker](https://wordpress.org/support/users/dbaker/) * Last activity: [18 years, 4 months ago](https://wordpress.org/support/topic/switch-background-image-onclick/#post-674851) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics