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

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!

<<:  HTML commonly used meta encyclopedia (recommended)

>>:  Vue implements partial refresh of the page (router-view page refresh)

Recommend

Implementation of setting fixed IP when starting docker container

Network type after docker installation [root@insu...

How to use MySQL common functions to process JSON

Official documentation: JSON Functions Name Descr...

A brief introduction to VUE uni-app core knowledge

Table of contents specification a. The page file ...

Example of implementing login effect with vue ElementUI's from form

Table of contents 1. Build basic styles through E...

Specific usage of textarea's disabled and readonly attributes

disabled definition and usage The disabled attrib...

Detailed explanation of Angular dynamic components

Table of contents Usage scenarios How to achieve ...

js Promise concurrent control method

Table of contents question background Idea & ...

Several ways to introduce pictures in react projects

The img tag introduces the image Because react ac...

Summary of CSS usage tips

Recently, I started upgrading my blog. In the proc...

Implementation of Grid common layout

No gaps on both sides, gaps between each column w...

Steps to build the vite+vue3+element-plus project

Use vite to build a vue3 project You can quickly ...

Recommended tips for web front-end engineers

Let's first talk about the value of web front...

Records of using ssh commands on Windows 8

1. Open the virtual machine and git bash window a...

How to use docker compose to build fastDFS file server

The previous article introduced a detailed exampl...