back to top

CSS background-size: definire le dimensioni dell’immagine di sfondo

CSS3 ha introdotto diverse proprietà per la gestione dello sfondo. Tra le più interessanti, sicuramente, c’è background-size, grazie alla quale lo sviluppatore può impostare, in modo arbitrario, la dimensione dell’immagine di sfondo (il valore di default di questa proprietà è "auto").

Per meglio comprendere il funzionamento di questa proprietà vediamo subito un esempio. Supponiamo di voler utilizzare, come immagine di sfondo, questa PNG raffigurante un auto sportiva rossa, avente le dimensioni di 300×150 pixel:

immagine da usare per creare lo sfondo

Proviamo ora a usare questa immagine come sfondo, centrato, per un box di 400×300 pixel.

div.box {
  width: 400px;
  height: 300px;
  padding: 20px;
  border: 2px solid;
  background: url(auto-rossa.png) no-repeat center center;
}

La stilizzazione che abbiamo proposto non ha nulla di nuovo e produce questo effetto:

sfondo con CSS 2.1

Proviamo ora ad aggiungere la proprietà background-size in modo da ridimensionare l’immagine usata come sfondo in modo che si estenda su tutta la superficie del box. Per farlo basta aggiungere una semplice riga alla nostra regola di stile:

background-size: 100% 100%;

Il risultato che otterremo sarà il seguente:

sfondo con background-size 100% 100%

Come possiamo vedere la nostra immagine è stata ingrandita e deformata.

background-size e dimensioni in percentuale

Nel nostro esempio abbiamo utilizzato la proprietà background-size specificando due parametri: la dimensione orizzontale (width) e quella verticale (height).

E’ anche possibile specificare un unico valore (la larghezza), in questo caso l’altezza è come se fosse impostata su "auto". Proviamo l’effetto applicando al nostro esempio questa direttiva:

background-size: 100%;

Questo l’effetto prodotto:

sfondo con background-size 100%

Come possiamo notare la nostra immagine di sfondo non è più deformata come lo era nell’esempio precedente.

background-size e dimensioni in pixel (o altra unità di misura)

Negli esempi visti sopra abbiamo impostato le dimensioni dell’immagine di sfondo utilizzando dei valori percentuali, tuttavia avremmo potuto utilizzare anche delle dimensioni espresse in pixel. Proviamo ad applicare al nostro box la seguente direttiva:

background-size: 100px 100px;

Questo il risultato:

sfondo con background-size 100px 100px

Come possiamo vedere l’immagine di sfondo è stata rimpicciolita e deformata (perchè nell’impostare le dimensioni non ho rispettato le proporzioni dell’immagine originale). Anche in questo caso, come per le percentuali, è possibile definire solo la larghezza lasciando, quindi, che l’altezza venga regolata automaticamente:

background-size: 100px;

Questo il risultato:

sfondo con background-size 100px

background-size: cover

La proprietà background-size può assumere anche il valore cover. In questo caso l’immagine viene adattata automaticamente al fine di coprire tutta la superficie dell’elemento. Può accadere che l’immagine venga tagliata parzialmente o leggermente deformata. Vediamo un esempio aggiungendo, al codice del nostro esempio, la seguente regola:

background-size: cover

Questo l’effetto ottenuto:

sfondo con background-size cover

Potete notare che l’immagine non è visibile nella sua interezza ma risulta tagliata: questo accade perchè le proporzioni dell’immagine non coincidono con quelle del box, pertanto è stato necessario qualche "sacrificio" per coprire interamente la superficie dell’elemento sia in larghezza che in altezza.

background-size: contain

Un altro valore che può assumere la proprietà background-size è contain. In questo caso l’immagine viene adattata automaticamente al fine di coprire la superficie dell’elemento, senza tuttavia essere tagliata o deformata. Potrà capitare, quindi, che alcune parti dello sfondo risultino "scoperte". Vediamo un esempio:

background-size: contain

Questo l’efetto:

sfondo con background-size contain
Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).