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:
- If you use only one value, the other value is automatically set to
centeror50%. - If you use two values, and both are keywords, they can be in either order. Otherwise, the first value controls the horizontal position, and the second controls the vertical position.
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:
-
repeat: Tiles the image horizontally and vertically to fill the entire background area. Example -
repeat-x: Tiles the image across the horizontal axis. Example repeat-y: Tiles the image down the vertical axis. Example-
no-repeat: Prevents the image from tiling. Example
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.