Using the body selector we can can control the appearance of an html page.

Lets look at the different properties available to the body selector.

background-color

body {background-color : #FFF;}

The background-color property replaces the deprecated bgcolor attribute associated with the body tag. Use Hexadecimal values to set your body background color.

background-image

body {background-image: url(eye.gif); }

The background-image property replaces the deprecated background attribute associated with the body tag.

background-repeat- CSS offers greater control over the placement and behaviour of the background-image.

body{background-image: url(eye.gif);
background-repeat: repeat;}

The background-repeat property will control the way in which the background-image repeats itself over the page.

Applying the simple repeat value will result in the image tiling over the background both vertically as well as horizontally.
view

You may limit the direction of the repeat using either the letter x for horizontal rpeat or y for vertical repeat.

body{background-image: url(eye.gif);
background-repeat: repeat-y;}
view

body{background-image: url(eye.gif);
background-repeat: repeat-x;}
view

You may want your background-image not to repeat. In that case, use the no-repeat value.

body{background-image: url(eye.gif);
background-repeat: no-repeat}
view

background-position - Use the background-position property to control the position of the background-image.

When specifying position values you always set the horizontal(x) value first followed by the vertical(y) value.

You may use any of the following words to control the horizontal(x) position of your background-image:

• left
• center
• right

Use any of the following words to control the vertical(y) position of your background-image:

• top
• center
• bottom

body {background-image: url(eye.gif);
background-repeat:no-repeat;
background-position:right bottom;}
view

Use percentage values to control the position of the background-image. Note:The first value controls the horizontal position and the second value controls the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.

body {background-image: url(eye.gif);
background-repeat:no-repeat;
background-position:45% 12%;}
view

Use CSS units measurment values to control the position of the background-image. Note:The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

body {background-image: url(eye.gif);
background-repeat:no-repeat;
background-position:45px 200px;}
view

Notice that when using percentage values, the position of the background-image is relative to the size of the browser. When using pixels on the other hand, the position of the background-image is absolute and is not affected by the size of the browser window.

background-attachment- The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Use fixed or scroll for the value.

body {background-image: url(eye.gif);
background-repeat:no-repeat;
background-position:45px 200px;
background-attachment:fixed;}
view

margin

The margin property may also be applied to the body selector.

The Margin properties control the amount of space around elements. Margin properties may be applied to elements other than the body selector. Such elements may be a paragraph tag, a table, a list and so on.
Use the margin property to change all of the margins at once.

body {background-image: url(eye.gif);
background-repeat:no-repeat;
background-position:100px 200px;
background-attachment:fixed;
margin: 100px;}
view

Use specific margin properties for more control over your page´s margins.
Use any, all or a combination of the following properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

body {background-image: url(eye.gif);
background-repeat:no-repeat;
background-position:100px 200px;
background-attachment:fixed;
margin-top: 2px;
margin-right: 10px;
margin-bottom: 100px;
margin-left: 200px; }
view

You may also use the body selector to specify the font family, size and color for your pages

body {background-image: url(eye.gif);
background-repeat:no-repeat;
background-position:100px 200px;
background-attachment:fixed;
font-family: Arial, Helvetica, sans-serif;
color:#999;
font-size:12px; }