Abbiamo già parlato della gestione dell’immagine di background con i CSS, dall’ultima versione dei CSS, cioè CSS3, esiste la proprietà background-size, che ti consente di definire le dimensioni dell’immagine di sfondo definita usando le regole CSS. 
La proprietà background-size è implementata in IE9+, Firefox 4+, Opera, Chrome, e Safari 5+.

Dimensioni dello sfondo in pixel

La prima possibilità di utilizzo della proprietà è quella di definire direttamente la dimensioni, in modo da distorcere l’immagine di sfono fino ad occupare lo spazio definito, il primo valore rappresenta la larghezza, il secondo l’altezza.

background-size:180px 600px;

Definizione parziale delle dimensioni in pixel

Si può anche definire una sola dimensione che verrà utilizzata sia per la larghezza che per l’altezza.

background-size:180px;

Dimensioni dello sfondo con valori percentuali

Analogamente si possono utilizzare valori percentuali che fanno riferimento alle dimensioni del contenitore e non dell’immagine.

background-size:100% 100%;
/*oppure*/
background-size:50%;

Cover e Contain

background-size: cover

Fa sì che l’immagine copra interamente lo sfondo dell’elemento, anche se questo significa tagliare/subire alcune parti dell’immagine.

• L’elemento è sempre completamente coperto, nessuna parte visibile dello sfondo
• L’immagine può essere parzialmente tagliata (non si vede tutta)
• Mantiene le proporzioni originali dell’immagine
• Ideale per: hero section, banner full-screen, immagini decorative dove non importa se parti dell’immagine vengono tagliate

.hero {
  background-image: url('immagine.jpg');
  background-size: cover;
  background-position: center;
}

background-size: contain

Ridimensiona l’immagine in modo che sia totalmente visibile sia in altezza che in larghezza, mantenendo le proporzioni.

• L’immagine è sempre completamente visibile, nulla viene tagliato
• Potrebbero esserci aree scoperte (spazi vuoti) nell’elemento
• Mantiene le proporzioni originali dell’immagine
• Ideale per: loghi, icone, immagini tecniche dove devi vedere tutto il contenuto

.logo-container {
  background-image: url('logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

Differenze chiave in sintesi:

Per ottenere l’effetti combinati è possibile accoppiare background-size con background-repeat e background-position.