Proprietà background-position-x CSS

Definizione e uso

background-position-x Imposta la posizione dell'immagine di sfondo sull'asse x.

Suggerimento:Per default, l'immagine di sfondo viene posizionata nell'angolo sinistro superiore dell'elemento e ripetuta verticalmente e orizzontalmente.

Esempio

Esempio 1

Come posizionare un'immagine di sfondo sull'asse x:

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

Prova personalmente

Esempio 2

Come posizionare un'immagine di sfondo a destra:

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

Prova personalmente

Esempio 3

Come posizionare un'immagine di sfondo in percentuale:

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

Prova personalmente

Esempio 4

Come posizionare un'immagine di sfondo in pixel:

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

Prova personalmente

Esempio 5

Creare un'immagine di sfondo coprente del contenitore utilizzando diverse proprietà di sfondo:

.hero-image {
  background-image: url("photographer.jpg"); /* Utilizzato l'immagine */
  background-color: #cccccc; /* Se l'immagine non è disponibile, utilizza questo colore */
  height: 300px; /* Deve essere impostata l'altezza */
  background-position-x: center; /* Centra l'immagine */
  background-repeat: no-repeat; /* Non ripeti l'immagine */
  background-size: cover; /* Adatta la dimensione dell'immagine di sfondo per coprire l'intero contenitore */
}

Prova personalmente

Sintassi CSS

background-position-x: value;

Valore dell'attributo

Valore Descrizione
left Posiziona l'immagine di sfondo alla sinistra dell'asse x.
right Posiziona l'immagine di sfondo alla destra dell'asse x.
center Posiziona l'immagine di sfondo al centro dell'asse x.
x%

Il lato sinistro dell'asse x è 0%, il lato destro è 100%.

Il valore percentuale indica la larghezza dell'area di posizionamento dell'immagine di sfondo meno la larghezza dell'immagine di sfondo.
xpos È la distanza orizzontale dal lato sinistro. L'unità può essere pixel (ad esempio 0px) o altri Unità CSS.
xpos offset

sintassi a due valori, supportata solo in Firefox e Safari.

  • xpos Imposta come left o right
  • offset È la distanza orizzontale tra l'immagine di sfondo e il lato sinistro o destro impostato con xpos

L'unità può essere pixel o altri Unità CSS.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Eredita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: 0%
Ereditarietà: No
Creazione di animazioni: Supportato. Vedi:attributi relativi agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.backgroundPositionX="center"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
sintassi a un valore 1.0 12.0 49.0 1.0 15.0
sintassi a due valori Non supportato Non supportato 49.0 15.4 Non supportato

Pagine correlate

Guida:Sfondo CSS

Riferimento CSS:attributo background-image

Riferimento CSS:attributo background-position

Riferimento CSS:attributo background-position-y

Riferimento HTML DOM:attributo backgroundPosition