Skip to main content

Getting StartED with CSS

Background Properties

These properties control the background color and images of individual HTML elements. Backgrounds apply only to the content and padding. They do not stretch into the margins of an element. If no background is specified, the background of the parent element shows through. See Chapter 5 for a detailed description.

background-attachment

Accepted values:
scroll, fixed
Default:
scroll
Inherited:
No

Determines whether a background image scrolls in relation to the rest of the document or remains in a fixed position within the browser viewport. Not supported by IE6.

Example of background-attachment: fixed

background-color

Accepted values:
A color value or the keyword transparent
Default:
transparent
Inherited:
No

Determines the color of an element’s background. If a background image is also specified, the image appears in front of the color.

background-image

Accepted values:
A URL or the keyword none
Default:
none
Inherited:
No

Only one background image can be applied to an element. By default, background images are tiled (repeated) both horizontally and vertically so they fill the entire background area. If the image is larger than the element’s content and padding, it is positioned at the top left of the padding, and cut off at the bottom and right edges. By default, background images scroll together with the element.

Use background-attachment to control scrolling, background-position to change the position of the image, and background-repeat to control tiling.

background-position

Accepted values:
Percentages, values with units of measurement, or keywords (see description)
Default:
0% 0%
Inherited:
No

This enables you to control the position of a background image both horizontally and vertically. In addition to inherit, the keywords left, center, and right control the horizontal position; top, center, and bottom control the vertical position. The property accepts one or two values, and applies them as follows:

Percentages are calculated not only in relation to the background, but also in relation to the image itself. So, 50% aligns the center of the background image with the center of the element.

background-repeat

Accepted values:
repeat, repeat-x, repeat-y, no-repeat
Default:
repeat
Inherited:
No

The keywords control the tiling of a background image as follows:

background

Default:
see individual properties
Inherited:
No

Shorthand property. Allows you to specify all background properties in a single declaration. Accepts the same values as the individual properties. Values can be listed in any order with the exception of those controlling the position of a background image. They follow the same rules as background-position.