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;
}