Research on Div CSS background attributes

In settingsBackground-ImageAttribute, there are many attributes

1. Background: URL ("image path") [no-Repeat];

Background: URL ("../images/up.jpg") No-Repeat; indicates that images are not repeatedly displayed.

2. Background-Position

Version: css1 compatibility: IE6 7 + FF + inheritance: None
Syntax:
Background-position: length | length
Background-position: Position | position
Value: Position: Top | center | bottom | left | center | right

Description:
Sets or retrieves the background image position of an object. The background-image attribute must be specified first.
This attribute positioning is not affected by the object's patch attribute (padding) settings.
The default value is 0% 0%. In this case, the background image is located in the upper left corner of the content area of the object that does not include the patch.
If only one value is specified, the value is used for abscissa. The default ordinate value is 50%. If two values are specified, the second value is used for ordinate.
If the value is set to right center, right will overwrite the center value as the abscissa value, so the background image will be located on the right.
The corresponding script feature is backgroundposition.

Example :
Div {Background: URL (\ "images/aardvark.gif \"); background-position: 35% 80% ;}
Menu {Background: URL (\ "images/aardvark.gif \"); background-position: 35% 2.5 ;}
A {Background: URL (\ "images/aardvark.gif \"); background-position: 3.25in ;}
Body {Background: URL (\ "images/aardvark.gif \"); background-position: Top 0px right 0px ;}
In fact, the background-position is used to control the position of the background-image.
If a value is specified, the value is used for horizontal coordinates. The default vertical coordinates are used, that is, 50% (center)
If two values are specified, the second value is used for ordinate,
For example, if you want to write: Background-position: left center; in fact, it is the same as background-position: left.
If: Background-position: Left left; is left alignment, vertical center alignment
If: Background-position: Right; is specified, the right alignment is used, and the vertical center alignment is used.
If you specify: Background-position: Left right; in fact, both values are used in the abscissa, right will overwrite the left attribute, so the last displayed is the right alignment, and the vertical center alignment.
In addition to left center right and top bottom, the two are top alignment and bottom alignment respectively.
For example, if background-position: Left top; is specified, the image is in the upper left corner.
With this feature, we can achieve a very cool effect.
You can write the following statements based on the above examples, and the compatibility is also good.
. Test {Background: url(title_bg2.jpg) No-repeat-203px 0px; width: 200px; Height: 36px ;}
. Title {Background: url(title_bg.jpg) No-repeat left 0px; width: 83px; Height: 36px ;}

 

3. Background-Attachment

Value: Fixed | scroll | inherit

Fixed indicates that the background image will not change with Page scrolling. Firefox and IE have different effects, but IE6 does not */

4. Background-repeat

Version: css1 compatibility: ie4 + ns4 + inheritance: None

Syntax:
background-repeat: repeat | NO-repeat | repeat-x | repeat- Y
parameters:
repeat: the background image is tiled vertically and horizontally.
NO-repeat: the background image is not tiled.
repeat-X: the background image is tiled horizontally.
repeat-Y: the background image is tiled vertically.
Note:
set or retrieve the background image and how to arrange it. You must first specify the background image of the object.
the script feature is backgroundrepeat . For more information, see my other bibliography.
example:
menu {Background: URL ("images/aardvark.gif"); background-repeat: Repeat-y;}
P {Background: URL ("images/aardvark.gif"); background-repeat: No-repeat ;}