I've been reading about how percentage values work for background-position position property. The official definition is that background-position-x: p% will move the image horizontally p% of the difference between the length of image and the container element. The same goes for background-position-y: p%. I found the official definition here:
"Percentages: refer to width of background positioning area minus height of background image"
The same defintion is used in w3.org's tutorial:
"Percentages on the other hand move the image a percentage of the difference between the containing box size, and the image size."
I understand the concpet and this definiton well. But the problem is the article on css-tricks.com uses a somewhat different definition:
"moving a background image by X% means it will align the X% point in the image to the X% point in the container."
This definition literally means background-position-x: p% will first choose a point P' in the image p% to the right of the start of the image and move the whole image such that P' is placed, along with the whole image, horizontally p% to the right of the container.
Question: - How to prove mathematically that these two different definitions of background-position property as equivalent?
E.g. taking the length of image l, length of container L then the difference between these Δl=L-l. First definition would offset the left border of image x pixels to the right such that
x = p% of Δl = (Δl*p)/100 pixels
For css-trick's definition: The left border of image would be offset by x pixels such that
x = (p% of L) - (p% of l) = p% of (L-l) = p% of Δl = (Δl*p)/100 pixels.
Well, Seems like I've proved it myself while writing the question.