Lo scopo della proprietà background-position è per impostare la posizione di un'immagine di sfondo. Questo articolo spiega i vari valori validi per la proprietà background-position.

Istruzioni

1

Se nessuna posizione di fondo è denominata, la posizione predefinita è nella posizione superiore sinistro dell'elemento.

2

Un valore può essere assegnato a questa proprietà come una lunghezza, una percentuale o utilizzando parole chiave specifiche.

3

Un valore di lunghezza posiziona l'immagine di sfondo nell'esatta posizione orizzontale e verticale denominato. Un valore di lunghezza fissa, ad esempio:

esempio () {

background-position: 200px;

}

rappresenta sia un 200px posizione orizzontale da sinistra e un 200px posizione verticale dalla parte superiore.

4

Due valori, rappresentano l'orizzontale e verticale, ad esempio:

esempio () {

background-position: 100px 200px;

}

5

Posizione può essere dato utilizzando le seguenti parole chiave per le posizioni orizzontale: a sinistra, centrato, a destra. Per posizioni verticali, queste parole chiave sono ammessi: superiore, centrale, inferiore. Per esempio:

esempio () {

background-position: left center;

}

6

Valori percentuali inserire un'immagine in una posizione correlata sia all'elemento che viene data un'immagine di sfondo e l'immagine effettiva stessa. Per esempio:

esempio () {

background-position: 30% 50%;

}

posiziona l'immagine al 30% della larghezza dell'immagine e il 50% dell'altezza dell'immagine in una posizione da sinistra il 30% e 50% dalla parte superiore dell'elemento contenitore.

7

Determinati valori di percentuale corrispondono alle parole chiave:
0% = sinistro o superiore
50% = centro
100% = destra o in basso
Ad esempio sfondo-posizione: a sinistra in alto;
è lo stesso come background-position: 0% 0%;

8

Sono ammessi valori negativi di lunghezza e percentuale. Questo può spostare la posizione di alcuni o di tutti l'immagine di sfondo all'esterno dei bordi dell'elemento contenitore. La parte all'esterno dei bordi dell'elemento contenitore non sarebbe visibile. Su un cambiamento creati dall'utente, forse passando sopra un collegamento, la parte nascosta l'immagine di sfondo può essere rivelata cambiando la posizione di sfondo dell'immagine di sfondo.