CSS Background-color, image background image

Background color Background-color Syntax:

Background-color:<color>

default value :Transparent transparent

applies to : all elements

Inheritance : None

Animation : Yes

Calculated value : Specify a value

Value:

<color>: Specifies the color.

Description

Sets or retrieves the background color of an object.

• The background image is overlaid on the background color when both the background color and background image are defined.
• If < ' Background-image ' is set, it is also recommended to set < ' Background-color ' > to maintain a certain contrast with the text color when the background image is not visible.
• The corresponding script attribute is backgroundcolor.

Background image Background-image

Grammar:

background-image:<bg-image> [, <bg-image>]*

<bg-image> = <image> | None

default value :None

applies to : all elements

Inheritance : None

Animation : No

Computed value : Specifies the value:

None: No background map.

<image>: Use absolute or relative addresses to refer to or create gradients to determine the image.

Description

Sets or retrieves the background image of an object.

• If < ' Background-image ' is set, it is also recommended to set < ' Background-color ' > to maintain a certain contrast with the text color when the background image is not visible.
• If multiple sets of background graphs are defined and there is overlap between the backgrounds, the previous one will be covered with the image that is written on the back.
• The corresponding script attribute is backgroundimage.

Background-image:url ("Http://static.criteo.net/flash/icon/nai_small.png"); Full URL Path

Background-image:url ("/flash/icon/nai_small.png"); Root Path

Background-image:url ("..  /nai_small.png "); Path relative to the CSS file

Background-image:url (..  /nai_small.png); Do not write quotation marks

Background-image:url ('.. /nai_small.png '); Single quotation marks

Repeat Background-repeat background

Grammar:

background-repeat:<repeat-style> [, <repeat-style>]*

<repeat-style> = Repeat-x | repeat-y | [Repeat | no-repeat | Space | Round] {1, 2}

default value :repeat

applies to : all elements

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

Repeat-x: Background image is tiled horizontally

Repeat-y: Background image is tiled vertically

Repeat: Background image is tiled horizontally and vertically

No-repeat: Uneven background image

Round: The background image is automatically scaled until it fits and fills the entire container. (CSS3)

Space: The background image is tiled with the same spacing and fills the entire container or direction. (CSS3)

Description

Sets or retrieves how the background image of an object is layout filled. You must first specify the < ' Background-image ' > property.

• 2 parameters are allowed, if all 2 parameters are provided, the 1th is for landscape and the second is for portrait.
• If only 1 parameters are supplied, it is used for both landscape and portrait. special values except Repeat-x and repeat-y, because repeat-x is equivalent to repeat no-repeat,repeat-y equivalent to no-repeat repeat, In fact, repeat-x and repeat-y are equivalent to providing 2 parameter values
• The corresponding script attribute is backgroundrepeat.

Background followed by content scrolling background-attachment

Grammar:

background-attachment:<attachment> [, <attachment>]*

<attachment> = Fixed | Scroll | Local

default value :scroll

applies to : all elements

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

Fixed: The background image is pinned relative to the form.

Scroll: The background image is fixed relative to the element, that is, the background image does not scroll when the element content scrolls, because the background image always follows the element itself. However, it scrolls along with the element's ancestor element or form.

Local: The background image is fixed relative to the element content, which means that the background image scrolls as the element scrolls along with the element, because the background image always follows the content. (CSS3)

Description

Sets or retrieves whether the background image is scrolled or fixed with the contents of the object. You must first specify the < ' Background-image ' > property.

• The corresponding script attribute is backgroundattachment.

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "Utf-8">    <title>Background-attachment background followed by content movement</title>    <styletype= "Text/css">. Parent{Height:2000px;    }. Sample{Overflow:Scroll;font-size:22px;margin:200px;width:230px;Height:200px;Border:2px solid Black;Background-image:URL (red.png);background-attachment         :  local;     }    </style></Head><Body><Divclass= "Parent"><Divclass= "Sample">Hello World, Hello World, hello World, hello World, hello World, hello World, hello World, hello World Hello Wor LD Hello world, hello World, hello World, hello World, Hello World.</Div></Div></Body></HTML>

CSS Background-color, image background image