O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Changing Page Background Colors and Images

NN 6, IE 4

Problem

You want to give users an opportunity to select a background color or background image for the current page or site.

Solution

Change one or more of the background-related style properties of the body element. The following examples demonstrate the range of options:

document.body.background = "url(watermark.jpg) repeat fixed";
document.body.backgroundAttachment = "fixed";
document.body.backgroundColor = "rgb(255, 255, 204)";
document.body.backgroundImage = "url(corp%20watermark.jpg)";
document.body.backgroundPosition = "5% 5%";
document.body.backgroundRepeat = "repeat-y";

Discussion

Several CSS style properties control aspects of element backgrounds. When applied to the body element, the background properties affect the entire page. Table 12-2 lists the scriptable properties and the types of values they accept.

Table 12-2. Background style properties and values.

Property

Description

background

Combination of several background styles in one specification, consisting of a space-delimited list of values for backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, and backgroundRepeat property values.

backgroundAttachment

How a background image clings to content during scrolling, controlled by constants fixed and scroll.

backgroundColor

Color specified as hexadecimal triplet (e.g., #ff00ff), CSS RGB value (e.g., rgb(255,0,255) or rgb(100%,0%,100%)), or color constant (e.g., green).

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required