background-size
Una novità dei CSS3 è la possibilità di ridimensionare un’immagine applicata allo sfondo.
Non caricare foto più grandi se l’effettiva dimensione che devi utilizzare è più piccola. Questo ti fa caricare dei dati che effettivamente non servono e che, quindi, rallentano solo il caricamento della tua pagina.
I valori che puoi attribuire a background-size
possono essere delle dimensioni fisse (nel qual caso devi usare delle coppie, proprio come background-position
, e le unità di misura sono sempre le solite), oppure dei valori particolari che ti elenco qui sotto:
contain
; permette di ridimensionare l’immagine in proporzione e di occupare il maggiore dei due spazi (altezza o larghezza) dati dal contenitore.cover
; scala l’immagine in modo da essere più grande possibile. In questo modo l’intera superficie dell’elemento avrà lo sfondo. Questo significa che alcune parti dell’immagine (quelle eccedenti) verranno tagliate.1