NET CSS code add background picture Common code _ Experience Exchange

Serial number Chinese description Mark grammar remark
1 background Color {background-color: value}
2 background picture {Background-image:url (URL) |none}
3 background Repeat {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 background Fixed {background-attachment:fixed|scroll}
5 background Positioning {background-position: Numeric |top|bottom|left|right|center}
6 back Style {background: background color | background image | Background repeat | background attachment | background position}

1. Background color: Background-color

Syntax: {background-color: Value}
Description: Parameter takes the same value as the Color property
Note: In HTML, there is only one way to add a background color to an object, which is to do a table, set the background color in the table, and put the object in the cell. This is more cumbersome, not only the code more, but also for the size and location of the table to hurt some brains. Now with CSS can easily be directly done, and the scope of the object is very wide, can be a paragraph of text, can also be just a word or a letter.
Example: give some text plus background color to some text plus background color
Table background color: style= "background-color:red"

2. Background picture: Background-image

Syntax: {background-image:url (URL) |none}
Description: URL is the location of the background image storage path. If you use "none" instead of the background image's storage path, nothing will appear.
Example: Add a background picture to some text. Imgbgstyle {background-image:url (logo.gif)}
3. Background repeat: background-repeat

Syntax: {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
Role: Background image Repeat control is the background image tile or not, that is, the combination of background positioning control can be on the page of a separate display of a background picture
Description: Parameter value range:
Inherit inheritance
no-repeat do not repeat tile background picture
Repeat
repeat-x to tile the picture in the horizontal direction only
repeat-y to tile the picture in the vertical direction only
Note: If you do not specify a background picture repeating property, the browser defaults to a background picture tiled horizontally, vertically, two directions.
4. Background fixed: background-attachment

Syntax: {background-attachment:fixed|scroll}
Description: Parameter value range
fixed: When the Web page scrolls, the background image is fixed as opposed to the browser window
Scroll: When a Web page scrolls, the background image scrolls with the browser's window
Note: The background picture is fixed to control whether the background picture scrolls with the scrolling of the page. If you do not set the background picture fixed property, the browser default background picture scrolls with the scrolling of the page. To avoid overly flashy background images that damage the viewer's eyesight when scrolling, you can remove the bundle of background pictures and text content, which is tied to the browser window.
Example: CSS that makes the background pattern "scroll" without the text
Body {background:purple URL (bg.jpg); Background-repeat:repeat-y background-attachment:fixed}
5. Background position: Background-position

Syntax: {background-position: Numeric |top|bottom|left|right|center}
Role: Background positioning is used to control where the background picture is displayed in the Web page.
Description: Parameter value range
• Numeric parameters with length units
Top: Top alignment relative to foreground object
bottom: Base alignment relative to foreground object
left: left-aligned relative foreground object
right: Align to right of relative foreground object
Center: Center alignment relative to foreground object
• Proportional relationship
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%
Note: Center in the argument is centered if it is used in front of another parameter, and if it is followed by another parameter, it is centered vertically.
6. Background style: Background

Syntax: {background: background color | background image | Background repeat | background attachment | background position}
Role: Background property is a more explicit background-the relationship of the properties of the write. Here are some background statements:
Example:
Body {background:white URL (http://www.htmlhelp.com/foo.gif)}
BLOCKQUOTE {background: #7fffd4}
P {Background:url (.. /backgrounds/pawn.png) #f0f8ff Fixed}
TABLE {background: #0c0 URL (leaves.jpg) No-repeat bottom Right}
Note: 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.