Proprietà background-size

La proprietà background-size imposta la dimensione dell'immagine di sfondo. I valori della proprietà sono qualsiasi unità per le dimensioni, oppure le parole chiave auto, cover o contain.

Sintassi

selettore {
	background-size: valore;
}

Parole chiave

Valore	Descrizione
`auto`	Lo sfondo avrà la dimensione naturale, come la dimensione reale dell'immagine di sfondo. Se `auto` è specificato solo per un lato, su quel lato lo sfondo si scalerà in modo da mantenere le proporzioni non distorte.
`cover`	Scala l'immagine in modo da coprire l'intero blocco preservando le proporzioni. L'immagine cercherà di adattarsi completamente, ma non sempre ci riuscirà, quindi una sua parte verrà ritagliata. Il blocco sarà sempre completamente coperto dall'immagine.
`contain`	Scala l'immagine in modo che si adatti completamente al blocco preservando le proporzioni. In questo caso può occupare tutta la larghezza, o tutta l'altezza (dipende dalle proporzioni dell'immagine e dalle dimensioni dell'elemento). In generale, il blocco non sarà coperto completamente dall'immagine (ma l'immagine sarà sempre completamente visibile, sebbene in versione ridotta).

Valore predefinito: auto.

Utilizzo

Le unità per le dimensioni e auto possono essere utilizzate in varie combinazioni, ad esempio: auto 20px, o 30% 20px, o auto 30% e così via. In questo caso il primo parametro imposta la dimensione dello sfondo in larghezza, e il secondo parametro - la dimensione dello sfondo in altezza. Se è specificato un solo parametro - questo imposterà la dimensione dello sfondo sia in larghezza, che in altezza contemporaneamente.

Esempio

Ora l'immagine di sfondo avrà la sua dimensione naturale:

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

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

Esempio

Ora l'immagine di sfondo avrà dimensione 300px per 400px (nel nostro caso le proporzioni dell'immagine verranno distorte):

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

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

Esempio

Ora l'immagine di sfondo avrà dimensione 400px per 400px (nel nostro caso le proporzioni dell'immagine verranno distorte):

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

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

Esempio

Ora l'immagine di sfondo avrà dimensione 400px in orizzontale, mentre in verticale la sua dimensione si adatterà in modo da non distorcere le proporzioni:

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

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

Esempio

Ora l'immagine di sfondo avrà dimensione 400px in verticale, mentre in orizzontale la sua dimensione si adatterà in modo da non distorcere le proporzioni:

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

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

Esempio . Valore contain

Osservate il funzionamento del valore contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Esempio . Valore cover

Osservate il funzionamento del valore cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Esempio . Miglioriamo il funzionamento di cover

Il funzionamento del valore cover può essere migliorato, centrando l'immagine con l'aiuto della proprietà background-position (nel nostro caso sulle parti visibili inizieranno ad apparire le teste dei cavalli, e non le loro zampe posteriori):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Vedi anche

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