background-image
The background-image property sets the background image of an element. For example:
BODY { background-image: url(body.gif) }
P { background-image: url(bg.png) }
When a background image is defined, a similar background color should also be defined for those not loading images.
background-repeat
The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }
In the above example, the image will only be tiled horizontally.
Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.
———————————
background-attachment
The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image:
BODY { background: white url(candybar.gif);
background-attachment: fixed }
background-position
The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)
The easiest way to assign a background position is with keywords:
css style sheets property background-positionHorizontal keywords (left, center, right)
css style sheets property background-positionVertical keywords (top, center, bottom)
Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.
When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.
If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.
The keywords are interpreted as follows:
css style sheets property background-positiontop left = left top = 0% 0%
css style sheets property background-positiontop = top center = center top = 50% 0%
css style sheets property background-positionright top = top right = 100% 0%
css style sheets property background-positionleft = left center = center left = 0% 50%
css style sheets property background-positioncenter = center center = 50% 50%
css style sheets property background-positionright = right center = center right = 100% 50%
css style sheets property background-positionbottom left = left bottom = 0% 100%
css style sheets property background-positionbottom = bottom center = center bottom = 50% 100%
css style sheets property background-positionbottom right = right bottom = 100% 100%
If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.
