Complete analysis of CSS Background Image Positioning (background-position)

In CSS, there are three positioning orientations for the background image:

 

 
1) Keyword: Background-position: Top right; 2) pixel: Background-position: 0px 0px; 3) percentage: Background-position: 0% 0%;
 

 

The above three statements position the image in the upper left corner of the background, and the effect is the same on the surface. In fact, the third positioning mechanism is completely different from the first two.
The first two positioning methods are to place the origin point in the upper left corner of the background image at the specified position. Please refer to the following figure. The specified positions are "20px 10px" and "60px 50px", both of which are the origin of the image. X is used to represent the image.

However, the third type of positioning is the percentage positioning. This is not the case. Its placement rule is that the point of the image itself (X %, Y %) overlaps with the point of the background area (X %, Y %. For example, if the position is "20% 10%", the actual result is as follows. We can see that this point is in the "20% 10%" position of the image itself.

The following is an interesting example.
The background image is stacked with four blocks with a side length of PX:

How can I pass it over:

 

The answer is: first set four Div areas on the webpage:

 <  Div  Class  = "Box1"  > </  Div  >  <  Div  Class  = "Box2" "  > </  Div  >  <  Div  Class  = "Box3"  > </  Div  >  <  Div  Class  = "Box4"  > </  Div > 

Then, write CSS as follows:

 . Box1,. box2,. box3,. box4 { Float : Left ; Width : 100px ; Height : 100px ; Position : Relative ; Background : # F3f2e2 url(1234.png) No-repeat ;} . Box1 { Background-Position : 0% 0% ;} . Box2 { Background-Position : 0% 33.33333% ;} . Box3 { Background-Position : 0% 66.66666% ;} . Box4 { Background-Position : 0% 100% ;}

We can see that the second and third squares are not as common as "0% 25%" and "0% 75% ".

---------------------------- Here, we will discuss more substantive things ---------------------------------

We know that CSS should be written like this when using images as the background. For example, the DIV container can also be the background of body, TD, P, etc. The truth is the same.

 
Div{Background:# Fff URL (image) No-repeat fixed X Y;}
 

The attribute values of background are as follows:

# Fff background color: (color value, which indicates the background color when the background image is not covered or does not have a background image)

Image background image: (here is the image address)

No-repeat: (the image is smaller than the container's size. By default, the image is arranged repeatedly to fill the container. No-repeat indicates that the image is not repeated. Only the positioning coordinates after this time can be used .)

Whether the fixed background is scrolled with the container: (two optional values are available, scroll, and fixed is not scroll. The default value is scroll)

Location of x y background image: (Note that it is meaningful only when no-repeat is located. This is the focus of today's speech)

In Background Image Positioning, we need to clarify the following points:

1. The first two values are the horizontal positioning, which is called the x-axis positioning. The next value is vertical positioning, which is called orientation in the Y axis. If there is only one value, the default value is the X axis direction. In this case, the Y axis direction defaults to the upper and lower center alignment, that is, the center.

2. The origin of the coordinate axis is the left vertex of the corresponding container.

3. the Y axis arrow of the coordinate is down, that is, the value of x y in the lower right corner (inside the container) is positive.

4. x y indicates the value of the Left vertex of the background image relative to the coordinate origin (that is, the left vertex of the container.

5. The value of x y can be expressed by percentage or PX.

6. x y can also be expressed using the "Left, right, top, bottom, center" alignment, but note: when "Left, right, top, bottom, center" is used, the alignment rule is applied, not the coordinate rule. If X is left, it indicates the alignment between the left side of the image and the left side of the container. If it is right, it indicates the right side of the image and the right side of the container, if y is set to top, the image top is aligned with the container top. If bottom is set to bottom, the image bottom is aligned with the container bottom. If x y is set to center, the image center is aligned.

7. When x Y is expressed as a percentage or PX, its value can be negative. By applying the coordinate rules, we can easily understand the meaning of negative numbers. when X is negative, it indicates that the Left vertex of the image is on the left of the Left vertex of the container, if y is negative, the left vertex of the image is above the left vertex of the container. That is, the left and upward directions are beyond the container range.

Below I will use several icons to illustrate the following situations: Blue blocks represent images, and dotted boxes represent containers (DIV, TD, or body ), note that only the background image can be seen in the container. I use white to indicate the visible part, and what is beyond the container range is invisible. I use Gray to indicate it. The coordinates of the left point of the container are (0, 0 ).

First, align the upper left corner of the background image with the volume. 0px 0px can also be written as Left top.

 

Second, the background image is in the middle of the container, and the fixed point coordinates are positive.

 

Third, the background image is in the upper left corner of the container, and the coordinate of the fixed point is negative.

---------------------------------------------

At this point, we may understand how to use the positioning value in the background to accurately locate a background image, and return to the two pictures we introduced at the beginning. We can use them: the background orientation and container are visible to call a part of the entire image at will.

However, for the convenience of calling, we should pay attention to some rules when arranging these small images. For example, the distance between small images is usually the size of the container that calls the small image, or the distance is a little greater, in this way, we can avoid displaying images that we do not want to display in the container!

In addition, if the percentage is used for positioning,AlgorithmSpecial. For example:

Background: # fff URL (image) No-repeat fixed 50%-30%;
 

In this case, where should the image be located? The algorithm formula is as follows:

The Coordinate Position of the Left vertex of the image from the left vertex of the container is

X: (container width-image width) x50 %

Y: (container height-Image Height) x (-30%)

The obtained result applies the coordinate rule. If the difference value is negative and the percentage is positive, the calculation result is negative. If the difference value is negative and the percentage value is negative, the calculation result is a positive number. All in all, this is the operator-based algorithm. Bring the result of the operation into the coordinate rule to get the position of the image.

For example, the container is width: 600px; Height: 600px; the image is width: 200px; Height: 200px;

We can use the above style to obtain the image position:

X :( 600px-200px) * 50%

Y :( 600px-200px) * (-30%)

For example:

If it is invalid, check whether the Y axis is reversed. That is to say, it is correct to change it to background-position: 0px-160px.