La Propiedad BACKGROUND-POSITION

La propiedad background-position en CSS establece la posición inicial de una o más imágenes de fondo dentro de un elemento.

La propiedad background-position en CSS establece la posición inicial de una o más imágenes de fondo dentro de un elemento. Te permite controlar dónde comienza a dibujarse la imagen de fondo en relación con el elemento al que se aplica.

Sintaxis Básica

La sintaxis básica para usar la propiedad background-position es la siguiente:

CSS
 
selector {
  background-image: url('tu-imagen.jpg'); /* Necesitas una imagen de fondo para ver el efecto */
  background-repeat: no-repeat; /* Generalmente se usa con no-repeat para ver la posición */
  background-position: valor;
}

Donde selector es el elemento HTML al que quieres posicionar la imagen de fondo y valor puede ser una combinación de palabras clave, porcentajes o unidades de medida.

Valores de la Propiedad background-position

La propiedad background-position puede tomar varios tipos de valores para definir la posición:

1. Palabras Clave (Keywords)

Puedes usar palabras clave para especificar posiciones comunes:

  • top: Posiciona la imagen en la parte superior del elemento.
  • bottom: Posiciona la imagen en la parte inferior del elemento.
  • left: Posiciona la imagen en el lado izquierdo del elemento.
  • right: Posiciona la imagen en el lado derecho del elemento.
  • center: Centra la imagen horizontal o verticalmente (o ambas).

Puedes combinar estas palabras clave para especificar esquinas o el centro:

  • top left o left top: Esquina superior izquierda.
  • top center o center top: Centrado horizontalmente en la parte superior.
  • top right o right top: Esquina superior derecha.
  • center left o left center: Centrado verticalmente en el lado izquierdo.
  • center center o center: Centrado tanto horizontal como verticalmente.
  • center right o right center: Centrado verticalmente en el lado derecho.
  • bottom left o left bottom: Esquina inferior izquierda.
  • bottom center o center bottom: Centrado horizontalmente en la parte inferior.
  • bottom right o right bottom: Esquina inferior derecha.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .top-left { background-position: top left; }
  .top-right { background-position: top right; }
  .bottom-left { background-position: bottom left; }
  .bottom-right { background-position: bottom right; }
  .center { background-position: center; }
</style>
</head>
<body>

  <div class="elemento top-left">Posición: top left</div>
  <div class="elemento top-right">Posición: top right</div>
  <div class="elemento bottom-left">Posición: bottom left</div>
  <div class="elemento bottom-right">Posición: bottom right</div>
  <div class="elemento center">Posición: center</div>

</body>
</html>

2. Porcentajes (%)

Puedes usar porcentajes para especificar la posición de la imagen de fondo. El primer valor representa la posición horizontal y el segundo la posición vertical.

  • 0% 0%: Esquina superior izquierda (equivalente a top left).
  • 100% 100%: Esquina inferior derecha (equivalente a bottom right).
  • 50% 50%: Centro (equivalente a center).
  • 0% 50%: Centrado verticalmente en el lado izquierdo.
  • 100% 50%: Centrado verticalmente en el lado derecho.
  • 50% 0%: Centrado horizontalmente en la parte superior.
  • 50% 100%: Centrado horizontalmente en la parte inferior.

El porcentaje representa un punto específico tanto en la imagen como en el elemento. Por ejemplo, 50% significa que el punto medio de la imagen se alinea con el punto medio del elemento en esa dirección.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .porcentaje-0-0 { background-position: 0% 0%; }
  .porcentaje-100-100 { background-position: 100% 100%; }
  .porcentaje-50-50 { background-position: 50% 50%; }
  .porcentaje-0-50 { background-position: 0% 50%; }
  .porcentaje-50-0 { background-position: 50% 0%; }
</style>
</head>
<body>

  <div class="elemento porcentaje-0-0">Posición: 0% 0%</div>
  <div class="elemento porcentaje-100-100">Posición: 100% 100%</div>
  <div class="elemento porcentaje-50-50">Posición: 50% 50%</div>
  <div class="elemento porcentaje-0-50">Posición: 0% 50%</div>
  <div class="elemento porcentaje-50-0">Posición: 50% 0%</div>

</body>
</html>

3. Unidades de Medida (Pixels, Em, etc.)

Puedes usar unidades de medida absolutas (como píxeles px, ems em, etc.) para especificar el desplazamiento exacto de la imagen desde la esquina superior izquierda del elemento. El primer valor es el desplazamiento horizontal y el segundo es el desplazamiento vertical.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .pixeles-20-30 { background-position: 20px 30px; }
  .em-1-2 { background-position: 1em 2em; }
</style>
</head>
<body>

  <div class="elemento pixeles-20-30">Posición: 20px 30px</div>
  <div class="elemento em-1-2">Posición: 1em 2em</div>

</body>
</html>

4. Combinación de Palabras Clave y Unidades/Porcentajes

Puedes combinar palabras clave con unidades de medida o porcentajes para un control más preciso.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .top-20px-left-50porciento { background-position: top 20px left 50%; }
  .bottom-1em-right-10px { background-position: bottom 1em right 10px; }
</style>
</head>
<body>

  <div class="elemento top-20px-left-50porciento">Posición: top 20px left 50%</div>
  <div class="elemento bottom-1em-right-10px">Posición: bottom 1em right 10px</div>

</body>
</html>

5. Posicionamiento con un Solo Valor

Si solo se proporciona un valor para background-position:

  • Si es una palabra clave (top, bottom, left, right, center), el otro valor se asume como center. Por ejemplo, background-position: top; es lo mismo que background-position: top center;.
  • Si es un porcentaje o una unidad de medida, se interpreta como el valor horizontal y el valor vertical se asume como 50%. Por ejemplo, background-position: 20px; es lo mismo que background-position: 20px 50%;.

6. Posicionamiento para Múltiples Imágenes de Fondo

Si tienes múltiples imágenes de fondo (definidas con comas en background-image), puedes especificar una posición diferente para cada imagen, también separando los valores con comas.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .multiples-fondos {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50/FF0000'), url('https://via.placeholder.com/50/00FF00');
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
  }
</style>
</head>
<body>

  <div class="multiples-fondos">Este div tiene dos imágenes de fondo posicionadas en diferentes esquinas.</div>

</body>
</html>

Interacción con background-repeat

La propiedad background-position es especialmente útil cuando background-repeat se establece en no-repeat. En este caso, background-position determina dónde se colocará la única instancia de la imagen de fondo. Si background-repeat está configurado para repetir la imagen, background-position establecerá el punto de inicio para la repetición.

Interacción con background-origin

La propiedad background-position siempre se calcula con respecto al origen del fondo, que está determinado por la propiedad background-origin. Por defecto, el origen es el padding-box, pero puede cambiarse a border-box o content-box.

Casos de Uso Comunes

  • Colocar un logotipo en una esquina específica de un encabezado o pie de página.
  • Centrar una imagen de fondo grande detrás del contenido.
  • Crear efectos visuales desplazando ligeramente una imagen de fondo.
  • Posicionar múltiples imágenes de fondo para crear diseños complejos.

Consideraciones

  • Asegúrate de que el tamaño de la imagen de fondo y el tamaño del elemento sean apropiados para el efecto de posicionamiento que deseas lograr.
  • Experimenta con diferentes valores para encontrar la posición exacta que mejor se adapte a tu diseño.
  • Cuando uses porcentajes, recuerda que se basan tanto en el tamaño de la imagen como en el tamaño del elemento.

Conclusión

La propiedad background-position es una herramienta esencial para controlar la ubicación de tus imágenes de fondo en CSS. Ya sea que necesites una colocación simple con palabras clave o un posicionamiento preciso con unidades de medida y porcentajes, esta propiedad te brinda la flexibilidad necesaria para diseñar la apariencia visual deseada de tus elementos web. ¡No dudes en probar diferentes valores y combinaciones para lograr efectos visuales interesantes!