background-position

Sommario

background-position imposta la posizione iniziale dell'immagine di sfondo impostata.

Valore iniziale : 0% 0%
Si applica a: tutti gli elementi
Ereditabile : no
Percentuali: si riferiscono alle dimensioni del blocco stesso
Media: visual
Valore riconosciuto: per <lunghezza> il valore assoluto o la percentuale.

Sintassi

background-position: [ <percentuale> | <lunghezza> | left | center | right  ] 
                     [ <percentuale> | <lunghezza> | top  | center | bottom ] ? ;

background-position: [ top | center | bottom ];

background-position: inherit;

Valori

<percentuale>: Con un valore di '0% 0%', l'angolo in alto a sinistra dell'immagine è allineato con l'angolo in alto a sinistra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.
<lunghezza>: Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.
top left e left top: Come '0% 0%'.
top, top center, e center top: Come '50% 0%'.
right top e top right: Come '100% 0%'.
left, left center, e center left: Come '0% 50%'.
center e center center: Come '50% 50%'.
right, right center, e center right: Come '100% 50%'.
bottom left e left bottom: Come '0% 100%'.
bottom, bottom center, e center bottom: Come '50% 100%'.
bottom right e right bottom: Come '100% 100%'.

Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).

Esempi

.exampleone {
	background-image: url("logo.png");
	background-position: top center;
}

.exampletwo {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.examplethree {
	background-image: url("logo.png");
	background-position: 2cm bottom;
}

.examplefour {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplefive {
	background-image: url("logo.png");
	background-position: 2cm 50%;
}

Specifiche

Compatibilità tra browser

Browser	Versione più vecchia
Internet Explorer	4
Firefox	1
Netscape	6
Opera	3.5

Vedere anche

background , background-attachment , background-color , background-image , background-position , background-repeat