Detailed explanation of background position percentage principle

Time:2021-7-28

Today, when I help others tune the code, I see a style:


background-position: 50% 0;
background-size: 100% auto;

For background size: 100% auto, it means that the width of the background picture is element width * 100%, and the height is scaled proportionally. Details can be found atcss3 background

For background position, it is natural to think that the percentage is calculated according to the width of the parent element, but background position is really not. It has its own principle. This is described in detail below.

1、 Equivalent writing

When reading various tutorials, there are the following equivalent expressions:

  • Top left, left top is equivalent to 0%
  • Top, top center, center top is equivalent to 50% 0%
  • Right top, top right is equivalent to 100% 0%
  • Left, left center, center left is equivalent to 0% 50%
  • Center, center is equivalent to 50%
  • Right, right center, center right is equivalent to 100% 50%
  • Bottom left, left bottom is equivalent to 0% 100%
  • Bottom, bottom center, center bottom is equivalent to 50% 100%
  • Bottom right, right bottom is equivalent to 100%

So why is left, top equivalent to 0%, and right bottom equivalent to 100%?

2、 Background position percentage calculation formula

background-postion:x y;
x: {width of container - the width of the background picture} * x percentage, and the excess part is hidden.
y: {height of container - the height} * y percentage of the background picture, and the excess part is hidden.

With this formula, it is easy to understand the 100% writing method, and it is easy to understand the above equivalent writing methods.

3、 Examples

1. Background position: center center is equivalent to background position: 50% 50% is equivalent to background position:? px ? px

The background image used in the example is as follows [size: 200px * 200px]:

The background image is centered in the container.


<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
    background-position: center center;
}
</style>
<div class="wrap">
</div>

The effect is to center the background picture

As mentioned above, the background image can be centered by setting percentage and keyword. If you want to set the image centering by specific value, how much should you set?

According to the above formula:

X = (width of container – width of background) * x percentage = (300px-200px) * 50% = 50px;

Y = (height of container – height of background image) * y percentage = (300px-200px) * 50% = 50px;

I.e. settingbackground-postion:50px 50px;

Test:


<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
/*    background-position: center center;*/
    background-position: 50px 50px;
}
</style>
<div class="wrap">
</div>

The effect is also centered.

This is the end of this article on the detailed explanation of the principle of background position percentage. For more information about background position percentage, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!