background-position

La proprietà CSS background-position permette di muovere un’immagine o una sfumatura di sfondo nel suo contenitore.

body {
  background-position: 300px 8px;
}

Ci sono tre tipologie di valori:

  • Lunghezza (es: 300px 8px)
  • Percentuali (es: 100% 30%)
  • Parole Chiave (es: top center)

I valori predefiniti sono 0 0. Questi posizionano l’immagine nell’angolo in alto a sinistra del contenitore.

I Valori di Lunghezza sono molto semplici: il primo valore è la posizione orizzontale, il secondo valore è la posizione verticale. Quindi 300px 8px muoverà l’immagine a destra di 300px e in giù di 8px. Puoi impostare i valori in px o in qualsiasi altra Unità di Lunghezza CSS.

Le percentuali funzionano in maniera diversa. Muovere un’immagine di una certa percentuale, significa allineare il punto X% dell’immagine con il punto X% del contenitore. Per esempio, 50% significa che il centro dell’immagine verrà allineato con il centro del contenitore. Un valore del 100% significa che l’ultimo pixel della tua immagine verrà allineato con l’ultimo pixel del contenitore.

Le Parole Chiave sono solo scorciatoie per le percentuali. Invece di scrivere 100% 0, si può utilizzare top right. Ecco l’elenco di tutte le parole chiave:

  • top: 0% verticlae
  • right: 100% orizzontale
  • bottom: 100% verticale
  • left: 0% orizzontale
  • center: 50% orizzontale se la posizione orizzontale non è già definita. Se è già definito verrà applicato alla posizione verticale.

L’ordine in cui vengono utilizzate le parole chiave non è rilevante. Utilizzare top center equivale a scrivere center top. Tuttavia questo vale solamente per le parole chiave: scrivere 30% center non è lo stesso di scrivere center 30%.

#Dichiarazione dei Valori

Con la proprietà background-position possiamo specificare fino a 4 valori.

Quando dichiari un valore, quel valore sarà l’offset orizzontale. IL browser imposterà l’offset verticale a center.

Quando dichiari due valori, il primo sarà l’offset orizzontale e il secondo valore sarà l’offset verticale.

Con tre o quattro valori le cose diventano meno intuitive, in compenso si ottiene più controllo sulla posizione dello sfondo.

In una sintassi con tre o quattro valori, si alterna tra le parole chiave (escluso center) e le percentuali o misure di lunghezza. Ricordatevi che le misure di lunghezza o percentuali devono essere necessariamente precedute da una parola chiave.

Quando specifichi tre valori, il browser interpreta il quarto mancante come 0. Ecco un esempio:

.esempio {
  background-position: left 30px bottom;
}

La posizione dell’immagine di sfondo sarà 30px da sinistra e 0px dal basso.

Ecco un esempio con quattro valori:

.esempio {
  background-position: left 30px bottom 80px;
}

Questo posiziona l’immagine a 30px da sinistra e 8px dal basso.

#Supporto dei Browser

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
4
firefox
Mozilla Firefox
49
ie
Internet Explorer
5.5
edge
Microsoft Edge
12
opera
Opera
15
safari
Apple Safari
3.1

Mobile / Tablet

and_chr
Android Chrome
85
and_ff
Android Firefox
79
android
Android
2.1
samsung
Samsung Internet
4
op_mob
Opera Mobile
59
ios_saf
iOS Safari
3.2

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.