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

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

1. contain e cover sono concetti più semplice a vedersi che a spiegarsi: guarda l’esempio qui sopra e tutto ti sarà più chiaro! Attenzione che entrambi funzionano solo su browser moderni http://caniuse.com/#search=background-size