CSS Background

Each is described in detail below:

background-color

The background-color property specifies the color of the background.

CSS Declaration	Output
p {background-color: 00FF00;}	Green Background
p {background-color: red;}	Red Background

background-image

The background-image property specifies the background image to use.

CSS Declaration	Output
p {background-image:url(yp.jpg);}	With Background Image

background-repeat

The background-repeat property specifies whether a small image repeats itself. The default is "repeat", which means repeating the image in both the x- and y- directions. You can also specify x-repeat, y-repeat, or no-repeat.

Examples below:

CSS Declaration	Output
p {   background-image:url(yp.jpg);   background-repeat: no-repeat; }	Background does not repeat.
p {   background-image:url(yp.jpg);   background-repeat: repeat-x; }	Background repeats horizontally.
p {   background-image:url(yp.jpg);   background-repeat: repeat-y; }	Background repeats vertically.
p {   background-image:url(yp.jpg);   background-repeat: repeat; }	Background repeats in both directions.

background-attachment

The background-attachment property specifies whether a background stays fixed on the screen. Possible values are "fixed" (background stays in the same place when scrolling) and "scroll" (background moves with the rest of content when scrolling).

Below are two examples:

body {background-attachment: fixed;   background-image: url("yp.jpg");   background-repeat: no-repeat; }	body {background-attachment: scroll;   background-image: url("yp.jpg");   background-repeat: no-repeat; }

background-position

The background-position property specifies the position of the background. The values can be

• A combination of [top,center,bottom] and [left,center,right].
• Two percentage values: The first value indicates the horizontal percentage, and the second value indicates the vertical percentage.
• Two position values: The first value is the absolute horizontal position, the second value is the vertical position.

Examples below:

body { background-image: url("yp.jpg");   background-repeat: no-repeat;   background-position: center center; }	body { background-image: url("yp.jpg");   background-repeat: no-repeat;   background-position: 20% 20%; }