CSS Styling Background

CSS properties used for background effects:
--> background- color
--> background-image
--> background-repeat
--> background-attachment
--> background-position



Background Color
The background-color sets the background color of an element. The background color can be specified by name (color name like "red"), RGB (an RGB value like "rgb(255,0,0)"), and Hex (a hex value like "@ff0000").
Example:
body {background-color:#b0c4de;}


Background Image
The background-image sets the background of an element.
Example:
body {background-image:url('paper.gif');}


Background Image - Repeat Horizontally or Vertically
Some images should be repeated only horizontally or vertically, or else they will look strange. If the image is repeated only horizontally (repeat-x), the bakcground will look better.
Bad Example:
body
{
background-image:url('gradient2.png');
}
Good Example:
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}


Background Image - Set Position and no-repeat
When using a background image, use an image that does not disturb the text.
Bad Example:
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Good Example:
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}


Background - Shorthand property
There are many properties to consider when dealing with backgrounds. It is also possible to specify all properties in one single property, this is called a shorthand property.
Example:
body {background:#ffffff url('img_tree.png') no-repeat right top;}


References:
CSS Styling, Styling Backgrounds, [Online], Retrieved 16 Feb 2011.
URL: http://www.w3schools.com/css/css_background.asp