Excerpted from other people’s work~~~ Very good stuff Grammar:
background-position : length || length
background-position: position || position
value:
length : Percent | A length value consisting of a floating point number and a unit identifier.
position: top | center | bottom | left | center | right
Description:
Sets or retrieves the object's background image position. The background-image attribute must be specified first. This property positioning is not affected by the object's padding setting.
The default value is: 0% 0%. At this time, the background image will be positioned at the upper left corner of the content area of the object excluding padding.
If only one value is specified, that value will be used for the abscissa. The ordinate will default to 50%. If two values are specified, the second value will be used for the ordinate.
If the setting value is right center, because right as the abscissa value will overwrite the center value, the background image will be positioned on the right.
The corresponding script property is backgroundPosition.
background-position -- defines the position
value of the background image:
[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ]
* level
left: left
center: medium
right: right
* vertical
top: on
center: medium
bottom: next
* Combination of vertical and horizontal
x-% y-%
x-pos y-pos
initial value: 0% 0%
Inheritance: No
Applies to: all elements
background: background.position: position. ***************************** Key points to explain: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<head>
<title>Background-position positioning problem</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body {
text-align:center;
background:#000;
}
#container{
width:1000px;
margin:0 auto;
background:#fff url(images/bg.jpg) no-repeat left top;
height:500px;
}
-->
</style>
</head>
<body>
<div id="container"> </div>
</body>
</html>1.background-position:left top; (see Figure 1). The upper left corner of the background image is aligned with the upper left corner of the container (container), and the excess part is hidden. Equivalent to background-position:0,0; also equivalent to background-position:0%,0%;2.background-position:right bottom; (see Figure 2). The lower right corner of the background image is aligned with the lower right corner of the container, and the excess part is hidden. Equivalent to background-positon: 100%, 100%; also equivalent to background-positon: the width of the container (container) - the width of the background image, the height of the container (container) - the height of the background image 3. background-position: 500px 15px ;(See Figure 3). The background image is moved 500px to the right and 15px down from the upper left corner of the container, and the excess part is hidden. 4.background-position:-500px -15px; (see Figure 4). The background image is moved 500px to the left and 15px up from the upper left corner of the container, and the excess part is hidden. 5.background-position:50% 50%; (see Figure 5). Equivalent to left: {width of the container - width of the background image}*left percentage, the excess part is hidden. Equivalent to right: {height of container (container) - height of background image}*right percentage, the excess part is hidden. For example: background-position:50% 50%; that is, background-position: (1000-2000)*50%px, (500-30)*50%px; that is, background-position:-500px, 235px; that is, the background image Move 500px to the left from the upper left corner of the container and 235px downward; 6. (In this case, the background image should be bg2.jpg to see the effect. The height of bg.jpg is too small and the effect is not obvious) background-position :-50% -50%; (see Figure 6). Equivalent to left: -{{width of container (container) - width of background image}*left percentage (all percentages are positive values)}, and the excess part is hidden. Equivalent to right: -{{height of container (container) - height of background image}*right percentage (all percentages are positive values)}, and the excess part is hidden. For example: background-position:-50% -50%; is background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px; is background- position:- 250px,-70px; that is, the background image moves 250px to the left from the upper left corner of the container and 70px upward;