Posición, tamaño y repetición de una capa de fondo

background-position: 50% no coloca la imagen en el punto medio del contenedor: hace algo bastante más útil que eso, y entender qué es explica por qué 50% centra cualquier imagen sea cual sea su tamaño mientras que 50px no centra nada. Con esa regla en la cabeza, la sintaxis de cuatro valores y los modos space y round dejan de parecer esquinas raras de la especificación.

Qué significa un porcentaje en la posición

La regla es esta: un porcentaje alinea el punto que está a ese porcentaje de la imagen con el punto que está a ese porcentaje del área de posicionamiento.

Con 50%, el centro de la imagen se alinea con el centro del área: la imagen queda centrada, mida lo que mida. Con 100%, el borde derecho de la imagen se alinea con el borde derecho del área: la imagen queda pegada a la derecha. Con 0%, pegada a la izquierda.

La fórmula del desplazamiento resultante es (ancho del area - ancho de la imagen) * porcentaje. Cuando la imagen es más grande que el área, ese número es negativo y el porcentaje desplaza la imagen hacia dentro, que es exactamente lo que quieres con una imagen recortada por cover.

Compáralo con una longitud, que sí es un desplazamiento literal del borde superior izquierdo de la imagen respecto al del área. background-position: 50px pone el borde izquierdo de la imagen a cincuenta píxeles, independientemente de su tamaño.

Esa diferencia se olvida siempre y produce el bug de la imagen que se descoloca al cambiar de tamaño: si mezclas calc(50% - 20px) estás sumando dos cosas que se comportan distinto, y el resultado solo cuadra en un tamaño concreto.

Las palabras clave son azúcar: left es 0%, center es 50%, right es 100%, y lo mismo para top, center y bottom en el eje vertical.

Tres y cuatro valores

La sintaxis de dos valores solo permite anclar al borde izquierdo y al superior. Para desplazar desde la derecha o desde abajo hay una forma extendida que empareja cada palabra clave con su desplazamiento:

/* A 20px del borde derecho y 10px del inferior. */
.a { background-position: right 20px bottom 10px; }

/* A 20px del derecho, centrado en vertical. */
.b { background-position: right 20px center; }

La regla gramatical es que un desplazamiento va detrás de la palabra clave de borde a la que se refiere. Con tres valores, el que se queda sin desplazamiento es el que no lo lleva.

Sin esta sintaxis, colocar algo a veinte píxeles de la derecha exige calc(100% - 20px), que funciona pero es menos legible y falla si la imagen cambia de tamaño, porque vuelve a mezclar los dos sistemas.

Cover, contain y el tamaño explícito

background-size acepta cuatro formas:

contain deja huecos si las proporciones no coinciden; con background-repeat: repeat esos huecos los rellena la repetición, cosa que casi nunca es lo que quieres. cover recorta por el eje que sobra, y qué parte se recorta lo decide background-position.

Ese emparejamiento es la clave del recorte inteligente: background-size: cover con background-position: 50% 20% recorta manteniendo visible la parte alta de la imagen, que es donde suele estar la cara en una fotografía de retrato.

Con un degradado la cosa cambia, porque un degradado no tiene tamaño intrínseco. auto se comporta como 100% 100%, así que un degradado sin background-size ocupa el área entera. Darle un tamaño explícito es lo que lo convierte en un mosaico repetible.

Space y round

background-repeat tiene seis valores y todo el mundo usa dos. Los otros resuelven un problema real:

space repite el número entero de mosaicos que caben y reparte el espacio sobrante entre ellos, dejando el primero y el último pegados a los bordes. Sin recorte y sin deformación.

round repite el número entero de mosaicos que caben y escala la imagen para que ocupen exactamente el área. Sin recorte y sin huecos, a cambio de deformar un poco.

.iconos-repartidos {
  background-image: url(punto.svg);
  background-size: 8px 8px;
  background-repeat: space;
}

Sin space, la última repetición se corta por la mitad al llegar al borde. Con space, los puntos quedan repartidos y completos. Es la diferencia entre un separador punteado que se ve bien y uno que se ve mal en la mitad de los anchos.

Los dos aceptan la forma de dos valores, uno por eje: background-repeat: round no-repeat escala horizontalmente y no repite en vertical.