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.
Imaginase 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;
}
Quiero posicionar la imagen de fondo y para esto necesito utilizar la propiedad
background-position
Palabras clave:
La propiedad
background-position
acepta como valor una o dos de las siguientes palabras clave: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.left
- izquierda: el borde izquierdo de la imagen toca el limite borde izquierdo del elemento.right
- derecha: el borde derecho de la imagen toca el limite borde derecho del elemento.center
- centro: la imagen aparece centrada./*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;}
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 abaj
o 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:
0 Comentarios