CSS in backgroud-position (background image) positioning problem

Description of Background-position:
Sets or retrieves the background image position of the object. You must first specify the Background-image property. This property location is not affected by the object's patch properties (padding) setting.
The default value is: 0% 0%. The background picture is positioned in the upper-left corner of the content area where the object does not include patches (padding).
If only one value is specified, the value is used for the horizontal axis. The ordinate will default to 50%. If two values are specified, the second value is used for the ordinate.
If you set the value to right center, the background image will be positioned on the left side because the center value will be overwritten with the axis value.
The corresponding script attribute is backgroundposition.

Grammar:
Background-position:length | | Length
background-position:position | | Position

Value:
Length: Percent | The length value consisting of floating-point numbers and unit identifiers.
Position:top | Center | Bottom | Left | Center | Right

Background-position--Define the location of the background image

Value:
[<percentage> | <length> | left | center | right] [<percentage> | <length> | top | center | bottom]]
* Level
Left: Right
Center: Medium
Right:
* Vertical
Top: Top
Center: Medium
Bottom: Next
* Vertical and horizontal combination
x-% y-%
X-pos Y-pos

Initial value: 0% 0%
Inheritance: No
Applies to: all elements
Background: background. Position: position.

Places to focus:

Example Source Code [www.52css.com]<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD"> "http://www.w3.org/1999/xhtml"lang="UTF-8"> pigzz.com</title> <style type="Text/css"> <!--*{margin:0; padding:0; } body {text-Align:center; background:# the;    } #container {width:1000px; Margin:0Auto; Background: #fff URL (Images/1. gif) no-repeat left top;    height:500px; }    -</style> "Container"> </div> </body> 
A. Background-position:left top; (see Figure 1).
The upper-left corner of the background picture is aligned with the upper-left corner of the container (container), and the excess portion is hidden.
equivalent to background-position:0,0;
also equivalent to background-position:0%,0%;
Two. Background-position:right bottom; (see Figure 2).
The lower-right corner of the background picture is aligned to the lower-right corner of the container (container), and the excess portion 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
Three. background-position:500px 15px; (see Figure 3).
The background image moves from the upper-left corner of the container (container) to the right 500px, the 15px down, and the outside part hidden.
Four. background-position:-500px-15px; (see Figure 4).
The background image moves from the top left corner of the container (container) to the left 500px, moving up 15px, and the excess part is hidden.
Five. background-position:50% 50%;(See Figure 5).
is equivalent to the width of the left:{container (container)-the width of the background picture is}*left percent, and the excess portion is hidden.
is equivalent to the height of the right:{container (container)-the height of the background image is}*right percent, and the excess portion is hidden.
For example: background-position:50% 50%; background-position: (1000-2000) *50%px, (500-30) *50%px; background-position:- 500PX,235PX: The background image is shifted from the upper left corner of the container (container) to 500px to the left and the 235px downward;
Six. background-position:-50% -50%;(See Figure 6).
(in this case the background picture should use bg2.jpg to see the effect, bg.jpg height is too small effect is not obvious)
is equivalent to the width of the left:-{{container (container)-the width of the background picture is}*left percent (the percentage takes a positive value)}, and the excess portion is hidden.
is equivalent to the height of the right:-{{container (container)-the height of the background image is}*right percent (the percentage is positive)}, and the excess portion is hidden.
For example: background-position:-50%-50%; background-position:-{(1000-500) *50%}px,-{(500-360) *50%}px; background- position:-250px,-70px, which is the background image from the upper left corner of the container (container) to the left 250px, move up 70px;
CSS in backgroud-position (background image) positioning problem