Proprietà background-position

La proprietà background-position definisce la posizione dell'immagine di sfondo di un elemento. La posizione può essere definita utilizzando qualsiasi unità di misura per le dimensioni. Il primo valore indica l'offset da sinistra, il secondo - l'offset dall'alto.

È possibile definire la posizione anche con parole chiave. In questo caso l'ordine dei valori non è importante. Le parole chiave per la verticale: top, center, bottom. Le parole chiave per l'orizzontale: left, center, right.

Come utilizzare le parole chiave

Per posizionare un'immagine con una parola chiave, è necessario specificare un valore per la verticale e uno per l'orizzontale. Ad esempio, se si specifica il valore top right, l'immagine si posizionerà in alto a destra.

L'ordine delle parole non è importante: si può scrivere top right, oppure - right top. Se è presente la parola chiave center - può essere omessa. Ad esempio, top center, è equivalente a semplicemente top. E center center è equivalente a semplicemente center.

Sintassi

selettore {
	background-position: due valori separati da spazio;
}

Esempio

Per impostazione predefinita, l'immagine di sfondo sarà nell'angolo in alto a sinistra:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo nell'angolo in alto a destra:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo nell'angolo in basso a destra:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo a destra e centrata verticalmente:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo al centro del blocco:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo a una distanza di 20px da sinistra e 40px dall'alto:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo a una distanza di 90% da sinistra e 100% dall'alto:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo a una distanza di 30px da sinistra e in basso verticalmente:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo a una distanza di 30px da sinistra e centrata verticalmente:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Posizioniamo l'immagine di sfondo a una distanza di 30px dall'alto e centrata orizzontalmente:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Vedi anche

la proprietà background,
che rappresenta una proprietà abbreviata per lo sfondo