How does background position affect the display of background images
When replacing the home page image in the project these two days, I found a problem. The previous style setting was background position: Center. When the page is reduced or enlarged, the display area of the background image will also change. Now, after changing to left top, the size of the page will change and the position of the image will not change. This is also wrong. Background position: isn’t the center displaying the background image from the middle of the element? Why does it still occupy all the element areas? Does this center mean the center of the background image or the center of the element?
Background position attribute
Background position is a collection attribute that sets the starting position of the background image, which are background-position-x and background-position-y respectively. The available values are left, right, top and 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%)
Regardless of the fixed pixel value positioning, this time we mainly explore the influence of the percentage value 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 so.
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
background-size: 100px 100px; background-position: 100% 100%;
You can see that when the background position is set to 100%, the background image is displayed in the lower right corner of the window instead of outside the overflow element area
Next, change the position
background-size: 100px 100px; background-position: 50% 50%;
It can be seen that the background image is now in the center of the element. In order to confirm that it is in the center, I used a child element with a middle style for comparison, and you can see the frame column of the child element.
It can be seen from the above two examples:
When the background position is set to 100%, and the picture is at the bottom right corner, the pixel value of background-position-x is equal to “the width of container element minus the width of background image”, and the pixel value of background-position-y is equal to “the height of container element minus the height of background image”;
When the background position is set to 50%, the picture is centered inside the element, then the pixel value of background-position-x is equal to “the width value of container element multiplied by 50% and then minus 50% of the background image width”, and the pixel value of background-position-y is equal to “the height value of container element multiplied by 50% and then minus 50% of the background image height”;
If w represents the width of container element, H represents the height of container element, BW represents the width of background image, and BH represents the height of background image, such a formula can be obtained through the above two examples:
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 value of background position actually participates in the calculation of container element width and height = content + padding
If the background size is set to 100%, no matter what percentage is set, the background position will not be offset
Conversely, if the background image size is larger than the element size, the negative offset will occur after setting the percentage.
Well, now I finally understand this attribute. The description of some CSS attributes is not accurate enough, which is easy to cause misunderstanding. I still have to practice myself to get the truth!
This is the end of this article about exploring the use of percentage value in background position attribute. For more relevant background position percentage value content, please search previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!