View Full Version : Change BG Image

02-03-2012, 05:03 PM
Hello! Thank you for your time.

My problem is, I would like to be able to change the background image of my webpage with three different buttons- each changing the background to something different (obviously).

I tried different things with javascript and stylesheets, and a few times I almost had it. I am new to this, so any help would be much appreciated!

ARCLite Studio
02-03-2012, 05:53 PM
This is assuming that you have set the background image as a property of the BODY tag either inline or via CSS.

*** Note, the URL's used in this for background images were just random links from a google search, these can point to anything, locally or a remote image, so not my images. ***

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<body style="background-image:url(http://www.dvd-ppt-slideshow.com/images/ppt-background/background-3.jpg)">

<input type="button" name="button" value="Change" onclick="document.body.style.backgroundImage = 'url(http://www.psdgraphics.com/wp-content/uploads/2009/05/abstract-purple-background.jpg)';" />

<input type="button" name="button" value="Original" onclick="document.body.style.backgroundImage = 'url(http://www.dvd-ppt-slideshow.com/images/ppt-background/background-3.jpg)';" />

02-03-2012, 06:05 PM
Thank you very much! So much simpler than all the crazy tactics I was employing.

ARCLite Studio
02-03-2012, 06:08 PM
Your welcome, note the code is UGLY, in so far as it was written as inline javascript and not externalized by calling a function. So this could be cleaned up and made to look a little better. But in any case the code is the same.

Best of luck.

02-03-2012, 06:13 PM
If you are looking to avoid having to upload massive images (reduce your load time and to avoid artifacting of your images when they scale to fit the background of your website) I would highly suggest something called Supersized.js. It includes the buttons you were looking for to change the background that you can style however you want w/ css, but if you're doing a full-page image this might be something you could consider. :D

I employed it in this site (http://www.dpjuza.com/home) if you want to take a look (the buttons are in the lower right