Propiedad CSS background-position

La propiedad CSS background-position establece la posición inicial de una background-image dentro de su elemento. Controla dónde se ancla la imagen — por ejemplo, en una esquina, centrada o desplazada una distancia fija desde un borde.

Esta página cubre las sintaxis de palabra clave, porcentaje y longitud, la diferencia importante entre cómo se miden los porcentajes y las longitudes, los desplazamientos relativos a un borde (la sintaxis de cuatro valores), la posición de varias imágenes de fondo y los errores más comunes.

De forma predeterminada el valor es 0% 0%, lo que coloca la imagen en la esquina superior izquierda del elemento. Si el fondo está configurado para repetirse, se repite en mosaico hacia afuera desde ese punto de anclaje tanto horizontal como verticalmente.

Valor inicial	0% 0%
Aplicable a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredada	No.
Animable	Sí. La posición puede cambiarse.
Versión	CSS1
Sintaxis DOM	object.style.backgroundPosition = "center";

Sintaxis

Sintaxis de la propiedad CSS background-position

background-position: value;

Puedes indicar uno o dos valores:

/* One value — the second axis defaults to center */
background-position: right;        /* same as: right center */

/* Two values — horizontal first, then vertical */
background-position: left top;
background-position: 50% 25%;
background-position: 20px 100px;

/* Four values — offset from a named edge */
background-position: right 20px bottom 10px;

Porcentajes frente a longitudes

Este es el detalle que más confunde a las personas. Un porcentaje alinea el mismo punto porcentual de la imagen con ese punto del contenedor, mientras que una longitud (px, em, etc.) mide la distancia entre las esquinas superiores izquierdas.

background-position: 100% 100% coloca la esquina inferior derecha de la imagen contra la esquina inferior derecha del contenedor — la imagen completa permanece visible.
background-position: 50% 50% (lo mismo que center center) centra la imagen independientemente de su tamaño.
background-position: 20px 0 simplemente desplaza la imagen 20px a la derecha de la esquina superior izquierda; el desplazamiento es independiente del tamaño de la imagen.

Por lo tanto, los porcentajes son mejores para "anclar a un borde o centrar" y las longitudes son mejores para "desplazar una cantidad fija".

Ejemplo de la propiedad background-position:

Ejemplo de la propiedad CSS background-position con valor predeterminado

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: left top;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned at the left-top corner of the element.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad background-position especificada en porcentaje:

Ejemplo de la propiedad CSS background-position usando % (porcentaje)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 50% 15%;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 50% from the left side and 15% from the top side of the element.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad background-position en píxeles:

Ejemplo de la propiedad CSS background-position usando px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: 5px 50px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 5px from the left, and 50px down from the top.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad background-position con el valor "right 100px":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right 100px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned 100px from the right edge, vertically centered.</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad background-position con el valor "center center":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned center.</p>
  </body>
</html>

Pruébalo tú mismo »

Desplazamiento desde un borde específico

La sintaxis de tres y cuatro valores permite desplazar la imagen desde un borde nombrado en lugar de desde la esquina superior izquierda. Cada longitud sigue la palabra clave que nombra el borde desde el que se mide:

/* 30px in from the right edge, 10px down from the top edge */
background-position: right 30px top 10px;

Esto es mucho más claro que intentar expresar lo mismo con porcentajes, y mantiene el desplazamiento constante incluso si el contenedor cambia de tamaño. Es compatible con todos los navegadores modernos (e Internet Explorer 9+).

Posicionar varias imágenes de fondo

Cuando un elemento tiene varias imágenes de fondo, asigna a cada una su propia posición en una lista separada por comas. El orden de las posiciones corresponde al orden de las imágenes:

.banner {
  background-image: url("logo.png"), url("pattern.png");
  background-repeat: no-repeat, repeat;
  background-position: right top, left top;
}

Aquí el logotipo se sitúa en la esquina superior derecha mientras que el patrón repetido comienza en la esquina superior izquierda.

Errores comunes

Orden incorrecto de los ejes. El primer valor es siempre horizontal y el segundo vertical — background-position: 30px 80px significa 30px desde la izquierda, no desde arriba.
Olvidar background-repeat: no-repeat. Si la imagen se repite en mosaico, la posición solo establece dónde comienza el primer mosaico, por lo que el efecto suele ser invisible.
Confundir porcentajes con longitudes. 50% centra la imagen; 50px es un desplazamiento fijo desde la esquina (ver la sección anterior).
Mezclar unidades en un par de valores es válido — background-position: center 20px es válido y útil.

Propiedades relacionadas

background-image — establece la imagen que se posiciona.
background-repeat — controla el mosaico, que interactúa con el punto de anclaje.
background-size — escalar la imagen cambia cómo se resuelven las posiciones porcentuales.
background-attachment — si la imagen se desplaza con la página o permanece fija.
background-color — el color de reserva que se muestra donde la imagen no cubre.

Valores

Valor	Descripción	Pruébalo
`left`, `center`, `right`, `top`, `bottom`	Establece la posición de la background-image. Si solo se establece un valor, el otro tiene como valor predeterminado `center`.	Pruébalo »
`x% y%`	El primer valor establece la posición horizontal y el segundo la vertical. `0% 0%` es la esquina superior izquierda. `100% 100%` es la esquina inferior derecha. Si solo se establece un valor, el otro tiene como valor predeterminado `50%`.	Pruébalo »
`xpos ypos`	El primer valor establece la posición horizontal y el segundo la vertical. Las unidades pueden ser píxeles (p. ej., `0px 0px`).	Pruébalo »
`initial`	Establece la propiedad a su valor predeterminado.	Pruébalo »
`inherit`	Hereda la propiedad de su elemento padre.

Práctica

¿Qué parámetros se pueden usar en la propiedad CSS background-position para especificar la posición de la imagen de fondo?

PorcentajePíxelRemPalabras clave (top, bottom, left, right, center)Valores de color (hex, rgba, etc.)