color
Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A

This property describes the text colour of an element, i.e. the "foreground" colour. There are different ways to specify red:

EM { color: red }
EM { color: rgb(255,0,0) }

background
Value: transparent | <color> [ / <color> ]? || <url> || <blend-direction> || <repeat> || <scroll> || <position>
Initial: transparent
Applies to: all elements
Inherited: no
Percentage values: N/A

This property describes the background of an element, i.e. the surface onto which the text content is displayed. The background can be transparent, one colour, two colours (blended in the direction specified by the <blend-direction> (see below) value, or an image, possibly combined with one or two colours.

For example :

P { background: transparent }
BODY { background: red }
H1 { background: blue / red }
BODY { background: url(chess.png) 50% repeat fixed }

This property does not inherit, but the parent element's background will shine through by default due to the initial transparent value. If neither an image or a colour is found, a value of 'transparent' is assumed.

If an image is specified and found through the URL, it will be overlaid on top of any colour specified. The colour (or colour combination) will be used to fill any transparency in the image, or to fill the image space while the image is loading.

<blend-direction>
If two colours have been specified, they will be blended according to the value of <blend-direction>. Legal values are [N | NW | W | SW | S | SE | E | NE]. If no value has been set, 'S' is assumed. The value specifies the direction of blending from the first colour into the second colour. The values are shorthands for north, north-west, west etc where 'N' is the top of the element's box, 'NW' is the upper left corner etc:

For example :

TABLE { background: blue/green NW }

<repeat>
This determines the extent of repetition of any specified background image. Values are [repeat | repeat-x | repeat-y | no-repeat]. If no value is set, 'repeat' is assumed, i.e. the image is repeated both horizontally and vertically.

BODY { background: url(marble.png) repeat-x }

<scroll>
This controls whether any specified background image should be fixed to the background, or allowed to scroll as the document is viewed. Possible values are [fixed | scroll], defaulting to 'scroll'.

<position>
<position> specifies the initial position of any specified background image. Values are [<percentage> | left | center | right [ <percentage> | top | middle | bottom]]. If no value is specified, '0% 0%' is assumed.

With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the element. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.

Specifiying only one value sets both the horizontal and vertical offset of the background image. If two values are given, the first position is used as the horizontal position.

If the background image is fixed with regard to the canvas (see the value above), the image is placed relative to the canvas instead of the element. E.g.:

---

---