A detailed introduction to CSS background-position usage

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

Description:
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.

Note: the image size used in this article is 300px*120px, in order to be able to express clearly what part of the graph is hidden, according to the size of the picture is divided into 9 equal parts. At the same time, the background picture container area draws a green border to clearly display the container's range.
1, background-position:0 0;
The upper-left corner of the background image is aligned with the upper-left corner of the container element. The setting is background-position:left top; or background-position:0% 0%; the effect is consistent. For example:

. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll 0 0;
border:5px solid Green;
}

Effects such as 1:

Figure 1

2. This property location is not affected by the object's patch properties (padding) setting.

For example, we add a padding value to the container element, and the upper-left corner of the background image is aligned with the upper-left corner of the container element. This only affects the height and width of the container element.

. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll 0 0;
border:5px solid Green;
padding:50px;
}

Effect 2:

Figure 2

3, background-position:-70px-40px;

The picture is shifted to the left of the container in the upper left corner of 70px, offset by 40px upward, example:

. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll-70px-40px;
border:5px solid Green;
}

Effect 3:

Figure 3

4, background-position:70px 40px;

The picture is shifted to the right by the upper-left corner of the container by 70px, offset by 40px downward, example:

. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll 70px 40px;
border:5px solid Green;
}

Effect 4:

Figure 4

5, background-position:50% 50%;

The picture is centered horizontally and vertically. and Background-position:center Center, the effect is equal.

is equivalent to the width of the x:{container (container)-the width of the background picture is}*x percent, and the excess portion is hidden.
is equivalent to the height of the y:{container (container)-the height of the background image is}*y percent, and the excess portion is hidden.

For example:. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll 50% 50%;
border:5px solid Green;
}

Its x= (300-210) *50%=45px;

Y= (150-120) *50%=15px;

Effect 5:

Figure 5

Since the part does not extend to both ends, we can first make a wide enough width picture to set the horizontal value to 50%, which can be used to adapt to different browsers, so that the picture is filled with the browser window and center. Replaces the MARGIN:50 Auto feature.

6, background-position:-50%-50%;

is equivalent to the width of the x:-{container (container)-the width of the background picture is}*x percent, and the excess portion is hidden.
is equivalent to the height of the y:-{container (container)-the height of the background image is}*y percent, and the excess portion is hidden.

. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll-50%-50%;
border:5px solid Green;
}

Effect 6:

Figure 6

7, background-position:100% 100%;

The picture is in the lower-right corner of the container element, and the Background-position:right bottom the same effect.

Example:

. container{
width:300px;
height:150px;
Background:transparent URL (bg.jpg) no-repeat scroll 100% 100%;
border:5px solid Green;
}

Effect 7:

Figure 7

A detailed introduction to CSS background-position usage