Exploring the use of percentage values ​​in the background-position property

How background-position affects the display of background images

When I was replacing the homepage picture in the project these two days, I found a problem. The previous style setting was background-position: center. When the page was reduced or enlarged, the area where the background image was displayed would also change. Now after changing it to left top, no matter how the page size changes, the image position does not change. This doesn’t make sense. Shouldn’t background-position:center display the background image in the center of the element? Why does it still occupy the entire element area? Does this center refer to the center of the background image or the center of the element?

background-position property

background-position is a collection property that sets the starting position of the background image, namely background-position-x and background-position-y. The available values ​​are left, right, top, bottom, as well as fixed pixel values ​​and percentage values.

• background-position-x: left (equivalent to 0%)
• background-position-x: right (equivalent to 100%)
• background-position-y: top (equivalent to 0%)
• background-position-x: bottom (equivalent to 100%)

Putting aside the fixed pixel value positioning, this time we will mainly explore the impact of percentage values ​​on the position of the background image. Normally, the percentage value should be a percentage relative to the width and height of the element, but the actual performance is not the case.

Actual situation set as percentage value

Note: The width and height of the element used as the background element container are set to 100%, 100%, and there is no border and padding
Example 1:

background-size: 100px 100px;
background-position: 100% 100%;

You can see that when background-position is set to 100%, the background image is displayed in the lower right corner of the window instead of overflowing the element area. Next, change the position. Example 2:

background-size: 100px 100px;
background-position: 50% 50%;

You can see that the background image is now in the center of the element. To prove that it is in the center, I used a child element with a centered style for comparison. You can see that it is framed by the child element.

From the above two examples we can see that:

When background-position is set to 100% 100%, the image is in the lower right corner. At this time, the pixel value of background-position-x is equal to "the width of the container element minus the width of the background image", and the pixel value of background-position-y is equal to "the height of the container element minus the height of the background image";

When background-position is set to 50% 50%, the image is centered inside the element. At this time, the pixel value of background-position-x is equal to "the width of the container element multiplied by 50% minus 50% of the background image width", and the pixel value of background-position-y is equal to "the height of the container element multiplied by 50% minus 50% of the background image height";

If w represents the width of the container element, h represents the height of the container element, bw represents the width of the background image, and bh represents the height of the background image, the above two examples can produce a formula:

background-position-x: percent = (w - bw) * percent
background-position-y: percent = (h - bh) * percent

When the element has padding:

padding: 100px 20px 50px 50px;
background-position: 0% 0%;

You can see that the background image is in the upper left corner of the padding area, so the percentage of background-position actually participates in the calculation of the container element width and height = content + padding
If the background-size is set to 100% 100%, then the background-position will not shift no matter what percentage it is set to.

Conversely, if the background image size is larger than the element size, a negative offset will occur after setting the percentage.
OK, now I finally understand this property. The descriptions of some CSS properties are not accurate enough and can easily lead to misunderstandings. Only through practice can we gain true knowledge!

This is the end of this article on exploring the use of percentage values ​​in the background-position property. For more relevant background-position percentage value content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!