Propiedad background-position

Ejemplos de uso

La propiedad background-position controla la posición en la que se muestra la imagen de fondo de un elemento. Por defecto, las imágenes de fondo que no se repiten se muestran en la esquina superior izquierda del elemento. Si la imagen de fondo se repite horizontalmente, se muestra en la parte superior del elemento y si se repite verticalmente, se muestra en la parte izquierda del elemento.

La explicación de los valores que se pueden asignar a la propiedad background-position es compleja porque es una propiedad muy flexible. De hecho, se pueden asignar uno o dos valores elegidos entre porcentajes, medidas y las palabras clave top, right, bottom, left y center.

Si sólo se indica un valor en la propiedad background-position, se considera que el segundo valor es center, que equivale al porcentaje 50%.

Si se indican dos valores en la propiedad background-position y uno de ellos no es una palabra clave (es decir, si al menos uno de ellos es una medida o un porcentaje) el primer valor se considera la posición horizontal y el segundo valor es la posición vertical.

En primer lugar, se puede utilizar cualquiera de las diferentes formas de indicar una medida en CSS para indicar la distancia que se desplaza la esquina superior izquierda de la imagen de fondo respecto de la esquina superior izquierda del elemento. El siguiente ejemplo muestra una misma imagen de fondo desplazada con diferentes unidades de medida:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 10px 30px;
}

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 2em 1.5cm;
}

El desplazamiento de las imágenes de fondo también se aplica a las imágenes que se repiten:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat;
  background-position: 10px 30px;
}

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: repeat-x;
  background-position: 2em 1.5cm;
}

Si se utilizan medidas, sus valores pueden ser negativos, de forma que la imagen de fondo se desplaza en la dirección contraria:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: -10px -30px;
}

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: -2em -1.5cm;
}

Si sólo se indica una medida, el navegador asigna el valor center al segundo valor, por lo que la imagen de fondo se centra verticalmente de forma automática:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 10px;
}

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: -2em;
}

La propiedad background-position también permite el uso de porcentajes para establecer la posición de la imagen de fondo. Cuando se indican dos porcentajes (x% y%) se considera que el punto x% - y% de la imagen de fondo se debe colocar en el punto x% - y% del elemento. Los siguientes ejemplos muestran este comportamiento de forma práctica:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
}

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

En el primer ejemplo, el punto 0% 0% de la imagen de fondo (es decir, su esquina superior izquierda) se coloca en el punto 0% 0% del elemento (también su esquina superior izquierda). El segundo ejemplo, el punto 100% 100% de la imagen de fondo (es decir, su esquina inferior derecha) se coloca en el punto 100% 100% del elemento (también su esquina inferior derecha).

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 33% 66%;
}

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

En el primer ejemplo, el punto 33% 66% de la imagen de fondo (es decir, el punto que está a un tercio de su anchura desde la parte izquierda y a dos tercios de su altura desde la parte superior) se coloca en el punto 33% 66% del elemento (un tercio de su anchura desde la parte izquierda y dos tercios de su altura desde la parte superior). El segundo ejemplo, el punto 50% 50% de la imagen de fondo (es decir, justo su centro) se coloca en el punto 50% 50% del elemento (también justo su centro).

Como sucede con las medidas, se pueden utilizar porcentajes negativos que mueven la imagen de fondo en la dirección contraria. Si se indica sólo un porcentaje, el navegador asigna el valor center al segundo valor, por lo que la imagen de fondo se centra verticalmente de forma automática:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 33%;
}

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: -30% -20%;
}

Además de las medidas y los porcentajes, CSS define varias palabras clave que se corresponden con algunas de las posiciones más utilizadas:

Si se utilizan dos palabras clave, se pueden asignar en cualquier orden (top left es equivalente a left top). A continuación se muestran algunas imágenes de fondo posicionadas mediante las palabras clave:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: bottom right;
}

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: center left;
}

El uso de las palabras clave permite simplificar los valores asignados a la propiedad background-position:

background-position: top;       /* Equivalente a 50% 0%   */
background-position: center;    /* Equivalente a 50% 50%  */
background-position: left;      /* Equivalente a 0% 50%   */
background-position: bottom;    /* Equivalente a 50% 100% */
background-position: right;     /* Equivalente a 100% 50% */

Debido a la gran flexiblidad de background-position es posible obtener el mismo efecto utilizando valores muy diferentes. Las siguientes propiedades, por ejemplo, son equivalentes:

background-position: center;
background-position: center center;
background-position: 50%;
background-position: 50% 50%;
background-position: center 50%;
background-position: 50% center;

Si la imagen de fondo permanece fija mediante la propiedad background-attachment, la referencia que se toma para posicionar la imagen de fondo es la ventana del navegador y no el elemento sobre el que se muestra la imagen.

En el siguiente ejemplo, una imagen de fondo fija se posiciona en top left, que es la esquina superior izquierda de la ventana del navegador. El resultado es que la imagen de fondo no se visualiza en el interior del elemento:

div {
  background-image: url("images/imagen_pequena.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top left;
}