La proprietà CSS background-size è una proprietà utilizzata per definire la dimensione dell'immagine di sfondo di un elemento HTML. Questa proprietà permette di controllare la dimensione dell'immagine di sfondo in relazione all'elemento stesso. La proprietà è molto utile per adattare l'immagine di sfondo alle dimensioni dell'elemento, in modo che l'immagine sia sempre visibile nell'area del box dell'elemento.
La proprietà background-size può essere definita come una coppia di valori separati da uno spazio, che rappresentano le larghezza e l'altezza dell'immagine di sfondo. I valori possono essere specificati in pixel, in percentuale o utilizzando i valori predefiniti auto o cover/contain.
Il valore predefinito è auto, che significa che la dimensione dell'immagine di sfondo sarà determinata dalle dimensioni originali dell'immagine.
Il valore cover garantisce che l'immagine di sfondo copra interamente l'elemento, adattando la sua dimensione in modo che non ci siano parti dell'elemento non riempite dall'immagine. Il valore contain garantisce che l'immagine di sfondo resti contenuta nell'elemento, ma mantenendo le sue proporzioni originali.
Ad esempio, consideriamo il seguente codice HTML:
<div class="box">
<p>Lorem ipsum dolor sit amet.</p>
</div>
E il seguente codice CSS:
.box {
width: 300px;
height: 200px;
background-image: url(image.jpg);
background-size: cover;
background-repeat: no-repeat;
}
In questo caso, l'immagine di sfondo verrà adattata alle dimensioni dell'elemento, garantendo che venga coperto interamente.
È anche possibile definire una dimensione specifica per la larghezza e l'altezza dell'immagine di sfondo, ad esempio:
.box {
width: 300px;
height: 200px;
background-image: url(image.jpg);
background-size: 200px 100px;
background-repeat: no-repeat;
background-position: center;
}
In questo caso, la larghezza dell'immagine di sfondo sarà fissata a 200 pixel e l'altezza a 100 pixel.