Proprietà background-position CSS

Definizione e uso

background-position Proprietà che imposta la posizione di inizio dell'immagine di sfondo.

Questa proprietà imposta l'immagine originale di sfondo (da background-image La posizione di definizione) dell'immagine di sfondo, se l'immagine di sfondo deve essere ripetuta, partirà da questo punto.

Suggerimento:Devi impostare l'attributo background-attachment a "fissoper garantire che l'attributo funzioni correttamente in Firefox e Opera.

Vedi anche:

Tutorial CSS:Sfondo CSS

Manuale CSS:Attributo background-image

Manuale HTML DOM:Attributo backgroundPosition

Esempio

Come posizionare un'immagine di sfondo:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Prova te stesso

Sintassi CSS

background-position: value;

Valore dell'attributo

Valore Descrizione
  • in alto a sinistra
  • in centro in alto
  • in alto a destra
  • in centro a sinistra
  • in centro
  • in centro a destra
  • in basso a sinistra
  • in centro in basso
  • in basso a destra

Se specifici solo una parola chiave, il secondo valore sarà "center".

Valore predefinito: 0% 0%.
x% y%

Il primo valore è la posizione orizzontale, il secondo valore è la posizione verticale.

L'angolo in alto a sinistra è 0%. L'angolo in basso a destra è 100% 100%.

Se specifici solo un valore, l'altro valore sarà il 50%.
xpos ypos

Il primo valore è la posizione orizzontale, il secondo valore è la posizione verticale.

L'angolo in alto a sinistra è 0 0. L'unità è pixel (0px 0px) o qualsiasi altra unità CSS.

Se specifici solo un valore, l'altro valore sarà il 50%.

Puoi mescolare % e valori di posizione.

Dettagli tecnici

Valore predefinito: 0% 0%
Ereditarietà: no
Versione: CSS1
Sintassi JavaScript: oggetto.style.backgroundPosition="center"

Altri esempi

Come posizionare un'immagine di sfondo utilizzando %
Questo esempio dimostra come posizionare un'immagine di sfondo sulla pagina utilizzando i percentuali.
Come posizionare un'immagine di sfondo utilizzando i pixel
Questo esempio dimostra come posizionare un'immagine di sfondo sulla pagina utilizzando i pixel.

Supporto del browser

Tabella delle versioni dei browser che supportano pienamente l'attributo.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5