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

[caniuse feature=”background-position-x-y”]