Backgrounds In CSS: Everything You Need To Know - CSS Essentials - page 6

The background-position property also works with other values,
keywords and percentages, which can be useful, especially when an
element's size is not set in pixels.
The keywords are self-explanatory. For the x-axis:
• left
• center
• right
And for the y-axis:
• top
• center
• bottom
Their order is exactly like that of the pixels values, x-axis value first, and y-
axis value second, as so:
background-position: top right;
Percentage values are similar. The thing to remember here is that when you
specify a percentage, the browser sets the part of the image at that
percentage to align with that percentage of the element. This makes more
sense in an example. Let's say you specify the following:
background-position: 100% 50%;