Aprendí algo el otro día cuando estábamos desarrollando las propiedades de fondo en el Almanaque. Es algo tan intuitivo que supongo que nunca antes me había parado a pensar en ello.
De forma predeterminada, la posición de fondo es 0 0, el top left esquina. Ahora imagina que lo configuras en 50% 0. Esa imagen de fondo ahora está en la parte superior central. Calcula el tamaño de esa imagen y coloca su centro en el centro del elemento.
Eso es diferente a si tu, por ejemplo, tuvieras un <img> y lo colocó en left: 50%; en ese escenario, el borde izquierdo de la imagen estaría en el punto medio. Si desea centrarlo, deberá tirar de él hacia la izquierda (traducción negativa o margen negativo).
Aquí hay una visualización de esa diferencia:
Vea el lápiz La diferencia entre la posición de fondo y la izquierda de Chris Coyier (@chriscoyier) en CodePen.
Entonces, si configuras algo como background-position: 25% 25%, que coloca la imagen de tal manera que el 25% del camino a través de sí mismo se alinea con el 25% del camino a través del elemento. Y lo mismo en vertical.
Nada revolucionario aquí. Creo que está inteligentemente diseñado. No tiene que pensar mucho en ello, porque simplemente funciona como supondría que funciona. Por supuesto que si me pongo right top para la posición de fondo, la imagen se dibuja en la esquina superior derecha. No pienso en cómo el navegador debe calcular el tamaño de la imagen y el tamaño del elemento y alinear los ejes en esas posiciones.