Detailed explanation of the background-position percentage principle

When I was helping someone adjust the code today, I saw a style:

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

For background-size:100% auto, it means that the width of the background image is the element width * 100%, and the height is scaled proportionally. See css3 background for details.

It is natural to think that the percentage of background-position is calculated based on the width of the parent element, but background-position is not really like that. It has its own principles. The following is a detailed introduction.

1. Equivalent Writing

When reading various tutorials, there are the following equivalent writing methods:

• top left, left top is equivalent to 0% 0%.
• top, top center, center top are equivalent to 50% 0%.
• right top, top right is equivalent to 100% 0%.
• left, left center, center left are equivalent to 0% 50%.
• center, center center is equivalent to 50% 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 are equivalent to 50% 100%.
• bottom right, right bottom is equivalent to 100% 100%.

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

2. Background-position percentage calculation formula

background-position:xy;
x: {container width - background image width}*x percentage, the excess part is hidden.
y: {container height - background image height}*y percentage, the excess part is hidden.

With this formula, it is easy to understand the 100% writing method, and it is also easy to understand the various equivalent writing methods mentioned above by calculation.

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 within 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 image

As mentioned above, the background image can be centered by setting percentages and keywords. If you want to center the image by setting a specific value, what should you set?

According to the above formula:

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

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

That is, set background-postion:50px 50px;

Test it out:

<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 background-position percentage principle. For more relevant background-position percentage content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!