| Sintaxis: | background-position: <valor> |
|---|---|
| Valores posibles: | [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center | right] |
| Valor inicial: | 0% 0% |
| Se aplica a: | Elementos de nivel bloque y elementos reemplazados |
| Heredado: | No |
En CSS la propiedad background-position permite posicionar una imagen de fondo dentro de su contenedor.
El valor por defecto de background-position es 0 0. Lo que quiere decir que la imagen de fondo aparece posicionada en la esquina izquierda arriba del contenedor.
Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados. (Un elemento reemplazado es aquel del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT, y OBJECT.)
Imaginemos un .elemento HTML que tiene una imagen de fondo que no se repite:
.elemento{
width:300px;
height:300px;
border:1px solid orange;
background-image:url(unaImagen.png);
background-repeat: no-repeat;
}La forma más sencilla de asignar una ubicación de fondo es con palabras clave:
Para posicionar la imagen de fondo, necesito utilizar la propiedad background-position y la forma más sencilla es con palabras clave
Palabras claves
La propiedad background-position acepta como valor una o dos de las siguientes palabras clave:
- Palabras clave horizontales (left, center, right)
- Palabras clave horizontales verticales (top, center, bottom)
left - izquierda: el borde izquierdo de la imagen toca el limite borde izquierdo del elemento.center - centro: la imagen aparece centrada.right - derecha: el borde derecho de la imagen toca el limite borde derecho del elemento.top - arriba: el borde superior de la imagen toca el borde superior del elemento.bottom - abajo: el borde inferior de la imagen toca el borde inferior del elemento.
/*posiciona la imagen en la esquina abajo derecha*/
.elemento{ background-position: bottom right;}No importa el orden en el cual aparecen las palabras clave:
/*posiciona la imagen en la esquina abajo derecha*/
.elemento{ background-position: right bottom;}Si una de las dos palabras clave faltan el css considera que la palabra clave que falta es center ( centro ).
/*posiciona la imagen en el centro arriba*/
.elemento{ background-position: top;}
/*posiciona la imagen en el centro */
.elemento{ background-position: center;}Unidades de medida
Pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los porcentajes son relativos al tamaño del elemento. Aunque se permiten longitudes, no se recomiendan debido a su inherente debilidad al tratar con diferentes resoluciones de pantalla.
Al usar porcentajes o longitudes, la posición horizontal se especifica primero, seguida de la posición vertical. Un valor como 20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento.
Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.
Las palabras clave son interpretadas como sigue;
- top left = left top = 0% 0%
- top = top center = center top = 50% 0%
- right top = top right = 100% 0%
- left = left center = center left = 0% 50%
- center = center center = 50% 50%
- right = right center = center right = 100% 50%
- bottom left = left bottom = 0% 100%
- bottom = bottom center = center bottom = 50% 100%
- bottom right = right bottom = 100% 100%
Si la imagen de fondo está fija en relación al lienzo, la imagen es colocada en relación al lienzo y no al elemento.
Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-position.
Porcentajes
La propiedad background-position acepta uno o dos valores expresados en porcentajes. Posicionar una imagen de fondo utilizando porcentajes es muy parecido a las palabras clave.
Si el valor utilizado es 0% la imagen aparece posicionada a la izquierda si se trata del valor para el posicionamiento horizontal, o arriba si se trata del valor para el posicionamiento vertical.
Si el valor utilizado es 100% la imagen aparece posicionada a la derecha si se trata del valor para el posicionamiento horizontal, o abajo si se trata del valor para el posicionamiento vertical.
Si el valor utilizado es 50% la imagen aparece centrada en el medio del contenedor.
/*posiciona la imagen en centro abajo*/
.elemento{ background-position: 50% 100%;}También podemos utilizar valores negativos.
/*posiciona la imagen en centro arriba a -10%*/
.elemento{ background-position: 50% -10%;}En el caso en el cual hay solo un valor, el CSS considera que el valor presente representa la posición horizontal mientras que el valor que falta es 50% o center.
/*posiciona la imagen a la izquierda a 10% del borde y en el centro*/
.elemento{ background-position: 10%;}Unidades de longitud (em, px …etc)
La propiedad background-position acepta uno o dos valores expresados en unidades de longitud (em, px …etc). En el caso en el cual hay dos valores el primer valor representa la posición horizontal y mientras que el segundo valor representa la posición vertical de la esquina derecha arriba de la imagen.
También en este caso podemos utilizar valores negativos.
/* posiciona la esquina derecha arriba de la imagen a una distancia de 100px en horizontal
y a 50 px en vertical */
.elemento{ background-position: 100px 50px;}En el caso en el cual hay solo un valor, el CSS considera que el valor presente representa la posición horizontal mientras que el valor que falta (para la posición vertical) es center ( centro )
/* posiciona el elemento a una distancia de 10px en horizontal
y verticalmente en el centro */
.elemento{ background-position: 10px;}También es posible combinar palabras clave, unidades de longitud y/o porcentajes si así lo deseamos.
Combinación de palabras clave y valores
Además de utilizar palabras clave, podemos utilizar hasta 4 valores combinando palabras clave y unidades.
.elemento {
background-position: right 45px bottom 20px;
}En este caso el borde inferior de la imagen esta a una distancia de 45px del borde inferior del contenedor mientras que el borde derecho de la imagen está a una distancia de 20px del borde derecho del contenedor.
Si uno de los valores numéricos faltan el valor de este se considera 0:
.elemento {
background-position: right 45px bottom;
}La imagen se repite
En el caso en el cual la imagen se repite ( background-repeat: repeat; ) el css posiciona primero una imagen segun lo especificado con la propiedad background-position. A continuación coloca las demás imagenes alrededor de la primera imagen.
Ejemplos
Vea todos estos ejemplos en Codepen:
See the Pen background-position*** by Gabi (@enxaneta) on CodePen.
