CSS Background image location: background's position

Position two parameters: horizontal position, vertical position----------The position refers to the background picture relative to the foreground object's

1.background:url (. /image/header.jpg) no-repeat left top; /* equivalent to 0%  0%*/
represents the position of the background picture in the specified Div, starting from the upper left corner

2.background : URL (... /image/header.jpg) no-repeat right bottom; /* equivalent to 100%   100%*/
indicates that the background picture is displayed from the lower-right corner of the specified Div, and the lower-right corner of the background image coincides with the lower-right corner of the Div

3.background:url (.. /image/header.jpg) no-repeat 300px 200px;   
that is, the background picture is 300px from the left edge of the div and 200px from the top edge of the Div.

4.background:url (.. /image/header.jpg) no-repeat 50% 50% ;  
/* equals Background:url (.. /image/header.jpg) No-repeat Center; */
The background picture is centered horizontally and vertically in the Div

5.background:url (.. /image/header.jpg) no-repeat 300px;  /* equivalent to 300px 50%*/
If only one parameter is written, the other parameter defaults to 50%, that is, the background picture is 300px from the left of the Div, and is centered in the vertical direction.

6.background:url (.. /image/header.jpg) no-repeat -300px-100px ; The
background picture moves 300px to the left of the div relative to the upper-right corner (0px,0px) and moves up 100px

7.background:url (.. /image/header.jpg) no-repeat 30% 30%;

The point of the background image (30%, 30%) is aligned with the point of the div to which it belongs (30%, 30%).

Note, however, that the percent value applies to both the element div and its background image.
For example:
(1) When the background image is centered in an element, the points in the image that are described as 50% 50% are aligned with the same point as described in the element.
(2) to make the background image across the element of One-third, longitudinal span two-thirds, can be declared as follows:
Background:url (beijing.gif) no-repeat 33% 66%;
This causes the image to be three points horizontally relative to the upper-left corner, and the point perpendicular to two-thirds coincides with the same point in the element.

Note that the horizontal value of the percentage is always in front. If you swap the two percent values in the previous example, the background image will be placed at level two-thirds, perpendicular to One-third. Similarly, when only one percent value is given, the value is a horizontal value, and the other vertical percentage value is assumed to be 50%. When only one value is given, the other is assumed to be center.

CSS Background image location: Background position (ext.)