La Propiedad BACKGROUND-POSITION-X

La propiedad background-position-x en CSS se utiliza para establecer la posición horizontal inicial de una imagen de fondo dentro de un elemento.

La propiedad background-position-x en CSS se utiliza para establecer la posición horizontal inicial de una imagen de fondo dentro de un elemento. Es una forma específica de controlar la ubicación horizontal, complementaria a la propiedad background-position que puede establecer tanto la posición horizontal como la vertical.

Sintaxis Básica

La sintaxis básica para usar la propiedad background-position-x 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-x: valor;
}

Donde selector es el elemento HTML al que quieres posicionar horizontalmente la imagen de fondo y valor puede ser una palabra clave, un porcentaje o una unidad de medida.

Valores de la Propiedad background-position-x

La propiedad background-position-x acepta los siguientes tipos de valores:

1. Palabras Clave (Keywords)

Puedes usar palabras clave para especificar posiciones horizontales comunes:

  • left: Posiciona la imagen en el lado izquierdo del elemento.
  • center: Centra la imagen horizontalmente dentro del elemento.
  • right: Posiciona la imagen en el lado derecho del elemento.

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;
  }

  .izquierda { background-position-x: left; }
  .centrado { background-position-x: center; }
  .derecha { background-position-x: right; }
</style>
</head>
<body>

  <div class="elemento izquierda">Posición X: left</div>
  <div class="elemento centrado">Posición X: center</div>
  <div class="elemento derecha">Posición X: right</div>

</body>
</html>

2. Porcentajes (%)

Puedes usar porcentajes para especificar la posición horizontal de la imagen de fondo. 0% representa el lado izquierdo y 100% representa el lado derecho. 50% centra la imagen horizontalmente.

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

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 { background-position-x: 0%; }
  .porcentaje-50 { background-position-x: 50%; }
  .porcentaje-100 { background-position-x: 100%; }
</style>
</head>
<body>

  <div class="elemento porcentaje-0">Posición X: 0%</div>
  <div class="elemento porcentaje-50">Posición X: 50%</div>
  <div class="elemento porcentaje-100">Posición X: 100%</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 el borde izquierdo del elemento.

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 { background-position-x: 20px; }
  .em-1 { background-position-x: 1em; }
</style>
</head>
<body>

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

</body>
</html>

4. Desplazamiento desde un Borde (con Palabras Clave)

Puedes combinar palabras clave con unidades de medida para especificar un desplazamiento desde un borde en particular.

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;
  }

  .izquierda-20px { background-position-x: left 20px; }
  .derecha-1em { background-position-x: right 1em; }
</style>
</head>
<body>

  <div class="elemento izquierda-20px">Posición X: left 20px</div>
  <div class="elemento derecha-1em">Posición X: right 1em</div>

</body>
</html>

Relación con background-position

La propiedad background-position es una propiedad abreviada que puede establecer tanto background-position-x como background-position-y al mismo tiempo.

  • Si proporcionas un solo valor a background-position, ese valor se aplicará a la posición horizontal (background-position-x), y la posición vertical (background-position-y) se establecerá en center.
  • Si proporcionas dos valores a background-position, el primer valor se aplicará a background-position-x y el segundo a background-position-y.

Si utilizas tanto background-position como background-position-x en el mismo selector, el valor de background-position-x sobrescribirá el valor horizontal establecido por background-position.

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;
  }

  .ejemplo1 {
    background-position: top right; /* Establece ambas posiciones */
    background-position-x: left; /* Sobrescribe la posición horizontal */
  }

  .ejemplo2 {
    background-position: 50% 20px; /* Establece ambas posiciones */
    background-position-x: 100px; /* Sobrescribe la posición horizontal */
  }
</style>
</head>
<body>

  <div class="elemento ejemplo1">Posición inicial: top right, Posición X final: left</div>
  <div class="elemento ejemplo2">Posición inicial: 50% 20px, Posición X final: 100px</div>

</body>
</html>

Interacción con background-repeat

Al igual que con background-position, background-position-x determina la posición horizontal inicial de la imagen de fondo cuando background-repeat está configurado en no-repeat o cuando la imagen se repite horizontalmente (repeat-x).

Interacción con background-origin

La posición horizontal establecida por background-position-x se calcula con respecto al origen horizontal del fondo, que está determinado por la propiedad background-origin. Por defecto, el origen es el padding-box.

Casos de Uso Comunes

  • Ajustar la posición horizontal de un logotipo o icono dentro de un elemento.
  • Centrar horizontalmente una imagen de fondo sin afectar su posición vertical.
  • Crear efectos visuales desplazando una imagen de fondo horizontalmente.
  • Trabajar con sistemas de diseño que requieren un control preciso sobre la ubicación de los elementos de fondo.

Consideraciones

  • Utiliza background-position-x cuando necesites un control específico sobre la posición horizontal de la imagen de fondo, sin modificar la posición vertical.
  • Recuerda que si solo necesitas establecer ambas posiciones, es más conciso usar la propiedad abreviada background-position.
  • Experimenta con diferentes valores para encontrar la posición horizontal exacta que mejor se adapte a tu diseño.

Conclusión

La propiedad background-position-x te ofrece un control detallado sobre la ubicación horizontal de las imágenes de fondo en tus elementos CSS. Al entender cómo utilizar sus diferentes valores y cómo interactúa con otras propiedades de fondo, puedes lograr diseños más precisos y visualmente atractivos. ¡No dudes en explorar las posibilidades que te brinda esta propiedad!