A compendium of CSS manuals: Color Background properties

Css

CSS Properties:

4. Colors and backgrounds (color andBackground) Properties:

Here is a description of the foreground color and background color in CSS , and how to set the picture.

Color Property:

The color property is used to set the foreground color of an element:

Property name : ' Color '
Property value : <color>
Initial value : based on user's initial value
Fit Objects : all elements
Whether to inherit : Yes
Percent remark : prohibited

The value of the color property can be a hexadecimal value, anRGB () function, or a CSS -recognized color name. Such as:

EM {color:red}
EM {Color:rgb (255,0,0)}

Background properties:

The Background-color property is used to set the background color and the initial value is transparent:

Property name : ' Background-color '
Property value : <color> | transparent
Initial value : transparent
Fit Objects : all elements
Whether to inherit : No
Percent remark : prohibited

The backgroud-image property is used to set the background picture:

Property name : ' Background-image '
Property value : <url> | none
Initial value : none
Fit Objects : all elements
Whether to inherit : No
Percent remark : prohibited

The URL can be either an absolute address or a relative address, for example:

Body {Background-image:url (marble.gif)}
P {Background-image:none}

The above two properties can also be implemented using normal HTML attributes, and the following properties are extensions of the CSS to the original HTML .
The background-repeat property is used to describe the repeating arrangement of the background picture:

Property name : ' Background-repeat '
Attribute value : repeat | repeat-x | repeat-y | no-repeat
Initial value : repeat
Fit Objects : all elements
Whether to inherit : No
Percent remark : prohibited

Where the value of the property means:
Repeat: Displays the picture repeatedly along the x-axis and y-axis two directions.
repeat-x: Repeats the picture along the x axis.
repeat-y: Repeats the picture along the y axis.
None: Do not repeat the picture.

For example:

Body {
background:red URL (pendant.gif);
Background-repeat:repeat-y;
}
/* indicates that the picture "Pendant.gif"is repeated along the y-axis , with the rest in red as the background color * *

The background-attachment property indicates how the background picture is displayed when the entire document is scrolled. There are two kinds of property values:fixed and scroll,fixed equivalent to IE4 watermark effect, which means that when you drag a document, the background is relatively static,scroll scrolls along with the document.

The background-position property is used to specify where the background picture appears:

Property name : ' Background-position '
Property value : [<percentage> | <length>]{1,2} | [Top | center | bottom] | | [Left | center | right]
Initial value : 0% 0%
Fit Object : container element
Whether to inherit : No
percent remark : Refer to the size of the element itself

Where the attribute value means:
" top left" and " left Top"Said"0% 0%"。
"Top","Top center" and "center Top" Said"50% 0%"。
" right Top" and " top Right"All say"100% 0%"。
"left","left center" , and "center left" Said"0% 50%"。
"center" and "Center Center" Said"50% 50%"。
"Right","right center" and "center right" All say"100% 50%"。
"bottom left" and "left bottom" Said"0% 100%"。
"Bottom","Bottom Center" and "center Bottom" All say"50% 100%"
"bottom right" and "right Bottom" Said"100% 100%"。
For example:

Body {background:url (banner.jpeg) Right Top}/* 100% 0% *
Body {background:url (banner.jpeg) Top center}/* 50% 0% *
Body {background:url (banner.jpeg) Center}/* 50% 50% *
Body {background:url (banner.jpeg) Bottom}/* 50% 100% *

The background property is the shortcut to the above background property, and the properties and order are as follows:

Property name : ' Background '
Property value : < ' background-color ' > | | < ' background-image ' > | | | < ' background-repeat ' > | | Background-attachment ' > | | < ' background-position ' >
Fit Objects : all elements
Whether to inherit : No
Percent remark : only allowed in background-position