Developer

Stupid Web Tricks: Choose a background color

Let your Web visitors choose the background color they see on your site. Find out how.

Click here for our complete list of Stupid Web Tricks.

One of the amazing features of Bill Gates's new house is that guests can choose what art they want to see on the walls. Your Web site can offer a similar experience to your visitors by letting them choose the background color they see.

Remember that the background color is only visible on pages without an opaque background image (for example, this trick wouldn't work on this page).

Step One
Paste the following JavaScript into the <HEAD> of your document:

<SCRIPT language="JavaScript">
<!— hide javascript

function changeBackground(hexNumber) {
   document.bgColor=hexNumber;
}

// done hiding —>
</SCRIPT>

Step Two
Paste the code below anywhere in the <BODY> of your document:

<FORM method="post" name="background">
<INPUT type="button" value="red"
 onclick="changeBackground('#cc0000')">
<INPUT type="button" value="green"
 onclick="changeBackground('#006600')">
<INPUT type="button" value="yellow"
 onclick="changeBackground('#ffff99')">
<INPUT type="button" value="white"
 onclick="changeBackground('#ffffff')">
<INPUT type="button" value="black"
 onclick="changeBackground('#000000')">
<INPUT type="button" value="grey"
 onclick="changeBackground('#666666')">
</FORM>

You can change the hex codes (you know, those cryptic strings like #009933 and #ffffff) to any colors you want. Just remember to change the name value of the button to correspond with the hex codes you use. A good hex code chart for nondithering colors can be found at Lynda.com.

Editor's Picks

Free Newsletters, In your Inbox