The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:
body { background-color: #338844; }
Set following background properties of an element:
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.
background-image: url|none|inherit;
To set the background image for an element:
body { background-image: url("fl/img/bg.png"); }
The background-color property specifies the background color of an element.
background-color: color|transparent|inherit;
body { background-color: #338844; }
View CSS Color Values for a complete list.
The h1, p, and div elements have different background colors:
h1 { background-color: #ff0000; } p { background-color: #00ff00; } div { background-color: #0000ff; }
The background-repeat property specifies whether the image is repeated.
background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;
body { background-image: url("images/fastlearning.jpg"); background-repeat:repeat; }
body { background-image: url("images/fastlearning.jpg"); background-repeat:repeat-x; }
body { background-image: url("images/fastlearning.jpg"); background-repeat:repeat-y; }
body { background-image: url("images/fastlearning.jpg"); background-repeat:no-repeat; }
body { background-image: url("images/fastlearning.jpg"); background-repeat:inherit; }
Background position property is used to control the position of an image in the background.
background-postion: value;
body { background-image: url("images/fl/bg.jpg"); background-position:right; }
The background-attachment property specifies whether a background image is fixed with regard to the viewport or scrolls along with the containing block.
background-attachment: scroll|fixed|local|inherit;
body { background-image: url("img/fl/css/bg.jpg"); background-attachment: scroll; }
body { background-image: url("img/fl/css/bg.jpg"); background-attachment: fixed; }
body { background-image: url("img/fl/css/bg.jpg"); background-attachment: inherit; }
There are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
When using the shorthand property the order of the property values is:
body { background: #f1f1f1 url("fl_img/css/bg.jpg") repeat-y left top; }