CSS Property Descriptions :

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.

margin

The margin property sets the margins of an element by specifying between one and four values, where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Examples of margin declarations include:

BODY { margin: 5em } /* all margins 5em */
P { margin: 2em 4em } /* top and bottom margins 2em, left and right margins 4em */
DIV { margin: 1em 2em 3em 4em } /* top margin 1em, right margin 2em, bottom margin 3em, left margin 4em */


Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Horizontal margins are not collapsed.

padding

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.

An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:

BLOCKQUOTE { padding: 2em 4em 5em }