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: #RRGGBB; }
Common ways of specifying background properties in CSS include the following −
background-attachment − Specifies whether the background stays fixed on the screen.
background-color − Specifies the color of the background.
background-image − Specifies the image to use for the background.
background-position − Specifies the position of the background.
background-repeat − Specifies whether the background image should be repeated vertically or horizontally or both.
background-size − Specifies the size of the background.
background-clip − Specifies where the background should be visible within the element box.
background-origin − Specifies where the upper left corner of the background should be shown.
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: #ff6347; }
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;
repeat − The image is repeated both horizontally and vertically.
body { background-image: url("images/htmltpoint.jpg"); background-repeat:repeat; }
repeat-x − The image is repeated horizontally only.
body { background-image: url("images/htmltpoint.jpg"); background-repeat:repeat-x; }
repeat-y − The image is repeated vertically only.
body { background-image: url("images/htmltpoint.jpg"); background-repeat:repeat-y; }
no-repeat − he image is not repeated: only one copy of the image is drawn.
body { background-image: url("images/htmltpoint.jpg"); background-repeat:no-repeat; }
inherit − Takes the same specified value as the property for the element's parent.
body { background-image: url("images/htmltpoint.jpg"); background-repeat:inherit; }