Atributo background-position-x de CSS

página anterior background-position
Página siguiente background-position-y

Definición y uso

background-position-x Establece la posición de la imagen de fondo en el eje x.

Consejo:Por defecto, la imagen de fondo se coloca en la esquina superior izquierda del elemento y se repite en las direcciones vertical y horizontal.

Ejemplo

Ejemplo 1

Cómo posicionar la imagen de fondo en el eje x:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

Prueba tu mismo

Ejemplo 2

Cómo posicionar la imagen de fondo a la derecha:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Prueba tu mismo

Ejemplo 3

Cómo usar la posición de imagen de fondo en porcentajes:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

Prueba tu mismo

Ejemplo 4

Cómo usar la posición de imagen de fondo en píxeles:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Prueba tu mismo

Ejemplo 5

Cree una imagen de fondo que cubra su contenedor utilizando diferentes propiedades de fondo:

.hero-image {
  background-image: url("photographer.jpg"); /* Imagen utilizada */
  background-color: #cccccc; /* Si la imagen no está disponible, se utiliza este color */
  height: 300px; /* Debe establecerse la altura */
  background-position-x: center; /* Centra la imagen */
  background-repeat: no-repeat; /* No repite la imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen de fondo para cubrir todo el contenedor */
}

Prueba tu mismo

Sintaxis CSS

background-position-x: value;

Valor del atributo

Valor	Descripción
left	Ubica la ubicación del fondo en el lado izquierdo del eje x.
right	Ubica la ubicación del fondo en el lado derecho del eje x.
center	Ubica la ubicación del fondo en el centro del eje x.
x%	El lado izquierdo del eje x es 0%, y el lado derecho es 100%. El porcentaje de valor indica la anchura de la región de ubicación del fondo menos el ancho de la imagen de fondo.
xpos	Es la distancia horizontal desde el lado izquierdo. Las unidades pueden ser píxeles (como 0px) u otras Unidades de CSS.
xpos desplazamiento	Sintaxis de dos valores, solo soportada en Firefox y Safari. xpos Establecer como left o right desplazamiento Es la distancia horizontal entre la imagen de fondo y el lado izquierdo o derecho establecido por xpos Las unidades pueden ser píxeles u otras Unidades de CSS.
initial	Establece este atributo en su valor predeterminado. Ver: initial.
inherit	Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado:	0%
Herencia:	No
Creación de animaciones:	Soportado. Consulte:Propiedades relacionadas con la animación.
Versión:	CSS3
Sintaxis JavaScript:	object.style.backgroundPositionX="center"