Proprietà background-position-y CSS

Definizione e uso

background-position-y L'attributo viene utilizzato per impostare la posizione dell'immagine di sfondo sull'asse y.

Suggerimento:Per default, l'immagine di sfondo viene posizionata nell'angolo sinistro superiore dell'elemento e ripetuta in direzione verticale e orizzontale.

Esempio

Esempio 1

Come posizionare l'immagine di sfondo sull'asse y:

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

Prova tu stesso

Esempio 2

Come posizionare l'immagine di sfondo in alto:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Prova tu stesso

Esempio 3

Come posizionare l'immagine di sfondo in ascissa y utilizzando percentuale:

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

Prova tu stesso

Esempio 4

Come posizionare l'immagine di sfondo in ascissa y utilizzando pixel:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

Prova tu stesso

Sintassi CSS

background-position-y: value;

Valore dell'attributo

Valore Descrizione
top Posiziona l'immagine di sfondo alla parte superiore dell'asse y.
bottom Posiziona l'immagine di sfondo alla parte inferiore dell'asse y.
center Posiziona l'immagine di sfondo al centro dell'asse y.
y%

La parte superiore dell'asse y è 0%, la parte inferiore è 100%.

Il valore percentuale indica l'altezza dell'area di posizionamento dell'immagine di sfondo meno l'altezza dell'immagine di sfondo.
ypos

La distanza verticale dal punto superiore.

L'unità può essere pixel (ad esempio 0px) o altri Unità CSS.
ypos offset

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

  • ypos Imposta a top o bottom.
  • offset È la distanza verticale tra l'immagine di sfondo e il punto superiore o inferiore impostato da ypos.

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 animazioni: Supportato. Vedi:proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.backgroundPositionY="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

Tutorial:CSS Sfondo

Riferimento CSS:attributo background-image

Riferimento CSS:attributo background-position

Riferimento CSS:attributo background-position-x

Riferimento HTML DOM:attributo backgroundPosition