XHTML Mobile Profile and CSS Reference: Color and Background Properties

Color and Background Properties

You can use the color and background properties to set foreground colors, background colors, and background images.

color

Sets the foreground color. The foreground is the content of the element, typically text, but also the rule drawn for the <hr> element, the color of any border (unless you set another color with one of the border properties), and so on.

Values

See Colors.

Default Value

Depends on the browser.

Useful For

All displayed elements except replaced, inline elements, such as <img> and <object>.

Inherited

Yes.

Notes

The variety of colors available depends on the phone.

Example

h1 {color: red}

Displays the text of first-level heads in red.

background-color

Sets the background color of content and padding. (Content and padding are described in The CSS Box Model.)

Values

See Colors, transparent

Default Value

transparent

Useful For

All elements.

Inherited

No.

Notes

If you set a background color, take care to set the foreground to a contrasting color, so that its content remains visible.

The transparent value allows the parent element's color to shine through.

Example

h1 {background-color: green}

Sets green as the background color the content and padding of all first level head.

background-image

Sets an image as a background pattern.

NOTE Background images can degrade the performance of your applications on real phones, because they take time to download and processor power to display. Test your applications on real phones. If performance is poor, try reducing the number and size of background images.

Values

URL, none

For more information, see URLs.

Default Value

none

Useful For

Block elements.

Inherited

No.

Notes

URLs includes information on how to take advantage of the Openwave icons and WAP pictograms included with the browser as background images.

Example

blockquote {background-image: url("images/sand.gif")}

Displays the sand.gif image in the background area of the <blockquote> element.

background-repeat

Determines whether a background image repeats both horizontally and vertically (repeat), horizontally only (repeat-x), vertically only (repeat-y), or not at all (no-repeat).

Values

repeat, repeat-x, repeat-y, no-repeat, or inherit

For more information, see Keywords.

Default Value

repeat

Useful For

Block elements.

Inherited

No.

Notes

If you set the value of background-repeat to no-repeat, the background image is displayed vertically centered behind the element block, and aligned left.

Example

blockquote {background-image: url("images/sand.gif"); 
            background-repeat: repeat}

Displays the sand.gif image behind the entire content and padding regions of <blockquote> elements, repeating the image both horizontally and vertically to fit.

background-position

Determines the position of a background image in its block, or the starting position of the image if you repeat the image.

Values

A single or a pair of units of measure or percentages; combinations of the keywords top, center, bottom, left, center, and right; inherit.

For more information, see Units of Measure, Percentage, Keywords.

Default Value

0% 0%

Useful For

Block elements.

Inherited

No.

Notes

Units of measure specify the distance from the top and left edge of the content or optional padding.

Percentages are relative to the dimensions of the block element's content plus optional padding. 0% 0% positions the image at the top left; 100% 100% positions the image at the bottom right.

A single unit of measure or percentage value sets the horizontal position only, centering the image vertically.

You can combine the keywords in many ways:

Table 2-3. background-position keyword combinations

Keyword combination	Equivalent to
`top left` and `left top`	`0% 0%`
`top`, `top center`, and `center top`	`50% 0%`
`right top` and `top right`	`100% 0%`
`left`, `left center`, and `center left`	`0% 50%`
`center` and `center center`	`50% 50%`
`right`, `right center`, and `center right`	`100% 50%`
`bottom left` and `left bottom`	`0% 100%`
`bottom`, `bottom center`, and `center bottom`	`50% 100%`
`bottom right` and `right bottom`	`100% 100%`

Example

blockquote {background-image: url("images/sand.gif"); 
            background-position: top right}

Positions the sand.gif image behind the top right of <blockquote> elements.

background-attachment

For background images that are set behind an entire document, as a property applied to the <body> element, the background-attachment property determines whether a background image is fixed and content scrolls across it, or whether the background scrolls with the content.

Values

fixed, scroll, inherit

Default Value

scroll

Useful For

<body>

Inherited

No.

Notes

The browser ignores this property if it is applied to any element except <body>.

Example

body {background-image: url("waves.gif"); background-attachment: fixed}

Causes any content in the document to scroll across the waves.gif image.

background

A shortcut property that sets some or all of the background properties.

Values

See the values for background-color, background-image, background-repeat, background-position, and background-attachment.

Default Value

See the individual background properties.

Useful For

Block elements.

Inherited

No.

Notes

Because they share no common values, you can use the individual background property values in any order.

Do not set a background-attachment value unless you are applying background to the <body> element.

Example

blockquote {background: red url("images/sand.gif") no-repeat center}

Sets red as the background color and centers a single instance of the sand.gif image behind <blockquote> elements.