background-posicion

facebook-svg gplus-svg twitter-svg

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 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.