background-position

Come cambiare, quindi, la posizione dell’immagine di sfondo? Grazie alla proprietà background-position.

La proprietà si compone di due valori: il primo è per l’asse X (ossia in orizzontale), mentre il secondo è per l’asse Y (ossia in verticale). La separazione di questi valori avviene tramite uno spazio.
I valori che puoi usare possono essere:

Coppie di valori predefinite

Puoi impostare lo sfondo secondo i valori predefiniti: top, right, bottom, left e center. Se usi questo metodo, puoi impostare anche un solo valore; il secondo sarà sempre center.

Percentuale

Le percentuali si riferiscono alla dimensione dell’elemento. L’angolo in alto a sinistra è 0% 0%, mentre l’angolo in basso a destra è 100% 100%. Anche qui, se imposti solo un valore, il secondo prenderà automaticamente 50%.

Posizione definita

Puoi impostare lo sfondo secondo una posizione ben definita in pixel. Anche in questo caso, se definisci solo un valore, il secondo sarà 50% o center.

Come hai visto nell’ultimo punto, la definizione della posizione può essere fatta anche con scale diverse. Ad esempio, potresti scrivere:

div{
   background-position: 10px bottom;
}

div{
   background-position: left 20%;
}