CSS

CSS background properties are used to define the background effects of an element. This can be used for background effects properties as below-

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

The background-color property specifies the background color of an element. this can be define in color of a page is defined in the body selector:

body {
background-color:#b0c4de;
}

The background color can be specified by:

• name - a color name, like "red"
• RGB - an RGB value, like "rgb(255,0,0)"
• Hex - a hex value, like "#ff0000"

Background Image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.The background image for a page can be set like this.

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

Background Image-Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.Some images should be repeated only horizontally or vertically, or they will look strange,like below-

body
{
background-image:url('backg.png');
}

If the image is repeated only horizontally (repeat-x), the background will look better-

bvody
{
background-image:url('logo.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. Showing the image only once is specified by the background-repeat property:

body
{
background-image:url('back.png');
background-repeat:no-repeat;
}

Background-Shorthand property

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property. The shorthand property for background is simply "background":

body {background:#ffffff url('img_tree.png') no-repeat right top;}