Controlar la posición de la imagen en el fondo (background-position)

Además de seleccionar el tipo de repetición de las imágenes de fondo, CSS permite controlar la posición de la imagen dentro del fondo del elemento mediante la propiedad background-position.

Esta propiedad es aplicable a cualquier elemento e indica la distancia que se desplaza desde la esquina superior izquierda.

Para esta propiedad se especificarán 2 valores:

Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior izquierda).

Si solamente se indica un porcentaje o una medida, se considera que es el desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de 50%.

Además existe la posibilidad de definir la posición de la imagen de fondo mediante palabras clave. Los posibles valores son los siguientes:

top | left | center | bottom |right

Si se utilizan solamente palabras clave, el orden es indiferente y por tanto, es lo mismo indicar top left y left top.

El siguiente ejemplo muestra una misma imagen de fondo posicionada de tres formas diferentes:

El código CSS y HTML para esta página sería el siguiente:

#caja1 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: bottom left;
}

#caja2 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: right top;
}

#caja3 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}

<div id="caja1"><h1>bottom left</h1></div>
<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO