Definición de .background-position aplicado en CSS
La propiedad .background-position en CSS le permite mover una imagen de fondo (o gradiente) dentro de su contenedor.
Caso de empleo de background-position
Si te gustaría emplear esta propiedad de CSS en tu hoja de estilos, hazlo de esta forma:
html {
background-position: 100px 5px;
}Otro ejemplo más avanzado de .background-position es el siguiente de CODEPEN:
Sintaxis de .background-position en CSS
background-position: value;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| arriba a la izquierda centro izquierda abajo a la izquierda Justo arriba centro derecha boton derecho parte superior central centro centro fondo central | Si solo especifica una palabra clave, el otro valor será "centro" | |
| x% y% | El primer valor es la posición horizontal y el segundo valor es la vertical. La esquina superior izquierda es 0% 0%. La esquina inferior derecha es 100% 100%. Si solo especifica un valor, el otro valor será 50%. El valor predeterminado es: 0% 0% | |
| xpos ypos | El primer valor es la posición horizontal y el segundo valor es la vertical. La esquina superior izquierda es 0 0. Las unidades pueden ser píxeles (0px 0px) o cualquier otro . Si solo especifica un valor, el otro valor será 50%. Puedes mezclar % y posiciones | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .background-position
Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
