The CSS background properties are used to define the background effects for elements.
CSS background properties:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
The
background-color property specifies the background color of an element.
The background color of a page is set like this:
body {
background-color: lightblue;}
background-color: lightblue;}
With CSS, a color is most often specified by:
- a valid color name - like "red"
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
In the example below, the <h1>, <p>, and <div> elements have different background colors:
h1 {
background-color: green;}
div {
background-color: lightblue;}
p {
background-color: yellow;
background-color: green;}
div {
background-color: lightblue;}
p {
background-color: yellow;
}
Background Image
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.
The background image for a page can be set like this:
body {
background-image: url("paper.gif");}
background-image: url("paper.gif");}
Background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
The shorthand property for background is
background:
body {
background: #ffffff url("img_tree.png") no-repeat right top;}
background: #ffffff url("img_tree.png") no-repeat right top;}
When using the shorthand property the order of the property values is:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
It does not matter if one of the property values is missing, as long as the other ones are in this order
