background-position
background-position define la posición inicial de la imagen de fondo especificada.
Valores porcentuales
Caja 1
background-position: 50% 50%;
El centro de la imagen es alineada con el centro del contenedor.
Caja 2
background-position: 0% 0%;
La esquina superior-izquierda de la imagen es alineada con la esquina superior-izquierda del contenedor.
Caja 3
background-position: 100% 100%;
La esquina inferior-derecha de la imagen es alineada con la esquina inferior-derecha del contenedor.
Caja 4
background-position: 10% 30%;
Con un valor 10% 30%, el punto a 10% desde la izquierda y 30% desde arriba de la imagen es colocado en el punto a 10% desde la izquierda y 30% desde arriba del contenedor.
Valores de mediciones
Caja 5
background-position: 10px 15px;
La imagen se desplaza dentro del contenedor 10px a la derecha y 15px hacia abajo.
Caja 6
background-position: 1rem 4rem;
La imagen se desplaza dentro del contenedor 1rem a la derecha y 4rem hacia abajo.
Palabras clave
Caja 7
background-position: left top;
La imagen se coloca en la parte superior y central del contenedor.
Caja 8
background-position: center center;
El centro de la imagen es alineada con el centro del contenedor.
Caja 9
background-position: right bottom;
La imagen se coloca en la esquina inferior derecha del contenedor.