Background Properties
|
Comments:
These properties let you control the color and background of elements.
|
Property |
Description |
Values |
Example |
color
|
Sets the color of the element.
|
color name hex value rgb(R%, G%, B%) rgb(R, G, B)
|
p {color: red} Displays the paragraph text in red.
|
background-color
|
Sets the color for the background of the element.
|
color name hex value rgb(R%, G%, B%) rgb(R, G, B)
|
H1 {background-color: green} Displays the background area of all level one headlines in green. (The effect is like having a green bar behind the headline.)
|
background-image
|
Specifies an image to use for the background of an element.
|
url(URLname)
|
blockquote {background-image: url(..images/sand.gif)} Displays the image "sand.gif" in the background area of the blockquote.
|
background-repeat
|
Specifies how and if a background image is repeated.
|
repeat repeat-x repeat-y no-repeat
|
blockquote {background-image: url(..images/sand.gif); background-repeat: repeat} Displays the image "sand.gif" in the background area of the blockquote and repeats the image vertically and horizontally to fill the entire background area.
|
background-attachment
|
Lets you attach the background image so that it doesn't scroll.
|
scroll fixed
|
blockquote {background-image: url(../images/sand.gif); background-attachment: fixed} Displays the image "sand.gif" in the background area of the blockquote and prevents the image from scrolling.
|
background-position
|
Sets the initial position of the background image.
|
vertical % horizontal % top center bottom left center right
|
body {background-image: url(..images/sand.gif); background position: center center} Centers the background image vertically and horizontally on the initial body screen.
|