Proprietà background-position-x

La proprietà background-position-x imposta la posizione orizzontale dell'immagine di sfondo dell'elemento.

La proprietà può accettare i seguenti valori: left, center, right, ed è anche possibile specificare la posizione dello sfondo in percentuali o pixel.

Sintassi

cssselettore {
  background-position-x: valore;
}

Esempio

Posizioniamo l'immagine di sfondo a sinistra orizzontalmente:

html<div id="elem"></div>

css#elem {
  background-position-x: left;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esempio

Ora spostiamo lo sfondo a destra:

html<div id="elem"></div>

css#elem {
  background-position-x: right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esempio

Posizioniamo l'immagine di sfondo al centro:

html<div id="elem"></div>

css#elem {
  background-position-x: center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esempio

Ora specifichiamo la posizione per lo sfondo in percentuale:

html<div id="elem"></div>

css#elem {
  background-position-x: 20%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Vedi anche