CSS Color and Background properties

Css

Color
Syntax: color: < colors >

Initial value: determined by the browser

Apply to: All objects

Backward-compatible: Yes

Color properties allow a Web page creator to specify the color of an element. The view unit can know the description of the color value. Some examples of color rules include:

H1 {Color:blue}
H2 {color: #000080}
H3 {color: #0c0}
To avoid conflicts with the user's style sheet, background and color properties should always be specified together.

Background color
Syntax: Background-color: < value >

Allowable value: < color > | Transparent (transparent)

Initial value: transparent (transparent)

Apply to: All objects

Backward compatible: No

Background Color property sets the background color of an element. For example:

Body {Background-color:white}
H1 {background-color: #000080}
To avoid conflicts with the user's style sheet, the background image should be specified regardless of the background color being used. In most cases, background-image:none are appropriate.

Web page makers can also use the background properties that are slightly written, and typically get better support than background color attributes.

Background image
Syntax: Background-image: < value >

Allowable value: < Unified resource Positioning Urls> | None (None)

Initial value: None (None)

Apply to: All objects

Backward compatible: No

Background image attributes set an element's background image. For example:

Body {Background-image:url (/images/foo.gif)}
P {Background-image:url (http://www.webjx.com/bg.png)}
For browsers that do not load images, you should also define a similar background color when you have defined a background image.

Web page makers can also use the background attributes that are slightly written, and usually have better support than background image attributes.

Background repeat
Syntax: Background-repeat: < value >

Allowable Value: Repeat | Repeat-x | repeat-y | No-repeat

Initial value: Repeat

Apply to: All objects

Backward compatible: No

The background repeat property determines how a given background image is duplicated. When the value is Repeat-x, the image is duplicated horizontally, and the image is duplicated when the repeat-y is on. For example:

Body {background:white URL (candybar.gif);
Background-repeat:repeat-x}
In the above example, the image will only be tiled horizontally.

Web page makers can also use the background attributes that are slightly written, and usually have better support than background repeat attributes.

Background Accessories
Syntax: background-attachment: < value >

Allowable Value: Scroll | Fixed

Initial value: Scroll

Apply to: All objects

Backward compatible: No

The background Attachment property determines whether the specified background image scrolls with the content or is considered to be a fixed oil painting. For example, the following specifies a fixed background image:

Body {background:white URL (candybar.gif);
Background-attachment:fixed}
Web page makers can also use the background attributes that are slightly written, and usually have better support than background attachment attributes.

Background position
Syntax: background-position: < value >

Allowable value: [< percent > | < length >]{1,2} | [Top | center | bottom] | | [Left | center | right]

Initial value: 0% 0%

Apply to: block level and replacement elements

Backward compatible: No

The image Position property gives the initial position of the specified background image. This property can only be applied to block-level elements and substitution elements. (The substitution element refers only to some elements of the known original size.) HTML replacement elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT. )

The easiest way to schedule a background position is to use a keyword:

Horizontal keywords (left, center, right)
Vertical keywords (top, center, bottom)
Percentages and lengths can also be used as a place to arrange background images. Percent is related to element font size. Although the length is allowed, they are not recommended because they have unavoidable drawbacks in handling different display resolutions.

When using percentages or lengths, you first specify the horizontal position, followed by the portrait position. A value, such as 20% 65%, that specifies the image on the left 20% up to 65% of that point will be placed on the left 20% of the element where the point is. A value, such as 5px 10px, specifies that the upper-left corner of the image is positioned 10 pixels above the left 5 pixel of the element.

If only the horizontal value is given, the vertical position value is 50%. The combination of length and percentage is allowed, and negative values are OK. For example, 10% -2cm is allowed. Although, percentages and lengths are not able to be combined with keywords.

The key words are explained as follows:

Top left = left top = 0% 0%
top = Top Center = center top = 50% 0%
Right top = top right = 100% 0%
left = Left Center = center left = 0% 50%
Center = Center Center = 50% 50%
right = right Center = center right = 100% 50%
Bottom left = left bottom = 0% 100%
bottom = Bottom Center = Center bottom = 50% 100%
bottom right = right bottom = 100% 100%
If the background image is fixed as an oil painting, the image of the oil painting will be placed in place of the element.

Web page makers can also use the background attributes that are slightly written, and usually have better support than the background position properties.

Background
Syntax: Background: < value >

Allowable value: < background color > | | < background image > | | < background repeat > | | < background accessories > | | < background position >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The Background property is a more explicit background-a brief write of the relationship attribute. Here are some background statements:

Body {background:white URL (http://www.webjx.com/foo.gif)}
BLOCKQUOTE {background: #7fffd4}
P {Background:url (.. /backgrounds/pawn.png) #f0f8ff Fixed}
TABLE {background: #0c0 URL (leaves.jpg) No-repeat bottom Right}
When a value is not specified, its initial value is accepted. For example, in the first three rules above, the background position property will be set to 0% 0%.

To avoid conflicts with the user's style sheet, the background and color should be specified together.