Background-position How to use this method

Grammar:
Background-position:length | | Length
background-position:position | | Position
Value:
Length: Percent | The length value consisting of floating-point numbers and unit identifiers. Please refer to 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 at the upper-left corner of the content area where the object does not contain patches (padding).
Suppose you only specify a value that will be used for the horizontal axis. The ordinate will feel 50%. Assuming that two values are specified, the second value is used for the ordinate.
Assuming that the setting value is Right center, the background image will be positioned on the left because the center value will be overwritten by the value of the horizontal axis.
The corresponding script attribute is backgroundposition.

Note: the image size used in this article is 300px*120px, in order to be able to express very clearly which 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. Like what:

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

Effect for example with 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. Here, only the height and width of the container element are affected.

. 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 takes the upper left corner of the container to the left offset by 70px, the upward offset 40px, demonstrates the sample:

. 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 takes the upper left corner of the container to the right offset by 70px, the downward offset of 40px, demonstrates the sample:

. 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

Because the outside 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 form 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.

Demo Sample:

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

Effect 7:

Figure 7

Background-position How to use this method