background-color, background-image, background-repeat, background-attachment and background-position. The following section will describe you how to use these properties to set the different styles for the backgrounds one by one.

Background Color:

The background-color property is used to set the background color.


    body { background-color:white; }

Background Image:

The background-image property set an image as a background.


  body { background-image: url(“picture.jpg”); }

Background Repeat:

background-image property repeats an image both horizontally and vertically. background-repeat property you can control how a background image is tiled in the background. You can set a background image repeat vertically (y-axis), horizontally (x-axis), in both directions.

body { background-image: url(“picture.jpg”);
background-repeat: repeat-x; }

Background Position:

background-position property is used to control the position of the background image the background image is positioned at top-right corner and the position of the image is specified by the background-position property.

 body { background-image: url(“picture.jpg”);
background-repeat: repeat-x;
background-position: 100% top; }

The Background Shorthand Property:

As you can see from the examples above, there are many properties to consider when dealing with the backgrounds. It is also possible to specify all these properties in one single property, to shorten the code. This is called a shorthand property.

body {
background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px; }