--- title: background-position slug: Web/CSS/background-position translation_of: Web/CSS/background-position ---

 

Sommario

Edit section

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

Sintassi

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

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

background-position: inherit;

Valori

Edit section
<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

Edit section
.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

Edit section

Compatibilità tra browser

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

Vedere anche

Edit section

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