Stile proprietà backgroundPosition

Definizione e uso

backgroundPosition Imposta o restituisce la posizione dell'immagine di sfondo all'interno dell'elemento.

Vedi anche:

Stili HTML:Proprietà background

Tutorial CSS:Sfondo CSS

Tutorial CSS3:Sfondo CSS3

Manuale CSS:Proprietà background-image

Manuale CSS:Proprietà background-position

Esempio

Esempio 1

Modifica la posizione dell'immagine di sfondo:

document.body.style.backgroundPosition = "top right";

prova personalmente

Esempio 2

Modifica la posizione dell'immagine di sfondo all'interno dell'elemento <div> in posizione centrale in basso:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

prova personalmente

esempio 3

modifica la posizione dell'immagine di sfondo all'interno dell'elemento <div> in 200 pixel orizzontali e 40 pixel verticali:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

prova personalmente

esempio 4

ritorna la posizione dell'immagine di sfondo all'interno dell'elemento <div>:

document.getElementById("myDiv").style.backgroundPosition;

prova personalmente

sintassi

ritorna l'attributo backgroundPosition:

oggetto.style.backgroundPosition

imposta l'attributo backgroundPosition:

oggetto.style.backgroundPosition = value

valore dell'attributo

valore descrizione
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
 se specifici solo un termine, l'altro valore sarà "center".
x% y%

il valore x rappresenta la posizione orizzontale, il valore y rappresenta 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 è 50%.
xpos ypos

il valore x rappresenta la posizione orizzontale, il valore y rappresenta la posizione verticale.

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

se specifici solo un valore, l'altro valore è 50%. Puoi utilizzare sia % che unità di misura.
initial imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit eredita questa proprietà dal suo elemento padre. Vedi inherit.

dettagli tecnici

valore predefinito: 0% 0%
valore di ritorno: una stringa che rappresenta la posizione dell'immagine di sfondo.
versione di CSS: CSS1

supporto del browser

backgroundPosition è una caratteristica di CSS1 (1996).

Tutti i browser lo supportano completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
supportato supportato supportato supportato supportato supportato