Colors and Backgrounds

This sets the style for the background of the text, page, table, or other elements.

Caution

As with other elements, color does not appear the same on all computers; however, most monitors will display a 256-color palette (with 216 of those colors consistent across all platforms). Lynda Weinmann's website (www.lynda.com/hex.html) contains two charts sorting these browser-safe colors sorted by both value and hue. They are well worth checking out.

background-color

Usage	Sets the background color of an element.
Values	<color> The hex number (or text equivalent) of the preferred color. transparent The same background as the underlying element.
Initial Value	TRansparent

background-image

Usage	Sets the background image for an element.
Values	url("...") The URL for the background image. none No image.
Initial Value	none

background-position

Usage	Sets the position of the background image. The values always appear in pairsthe first number refers to the horizontal positioning of the image; the second to the vertical positioning. For example, background-position: 0% 100 will place the image at the top right of the browser window.
Values	<percentage> The position of the background image. top Corresponds to 0%. bottom Corresponds to 100%. left Corresponds to 0%. right Corresponds to 100%. center Corresponds to 50%.
Initial Value	none.

background-repeat

Usage	Sets the pattern of repeats for the background image.
Values	<no-repeat> The background image does not repeat. <repeat> The background image repeats both horizontally and vertically (as normal) to fill the entire space. <repeat-x> The background image repeats horizontally only to fill the entire space. <repeat-y> The background image repeats vertically only to fill the entire space.
Initial Value	repeat.

color

Usage	Sets the color of the font.
Values	<color> The hex number (or text equivalent) of the preferred color. inherit The same as the parent element.
Initial Value	Depends on the browser setting.

Tip

Some colors have been defined in the style sheet specification by a name, not a hexadecimal code. The following 16 are guaranteed to appear the same in all resolutions.

• aqua

• black

• blue

• fuchsia

• gray

• green

• lime

• maroon

• navy

• olive

• purple

• red

• silver

• teal

• white

• yellow