Nell’ultima versione dei CSS ossia CSS3 esiste una proprietà background-size, che ci consente di definire le dimensioni dell’immagine di sfondo definita mediante le regole css.
 
La propeità background-size è implementata in IE9+, Firefox 4+, Opera, Chrome, e Safari 5+.
 
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;

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

background-size:180px;

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%;

Altri valori interessanti sono cover e contain:

background-size:cover;
/*oppure*/
background-size:contain

Il valore cover fa si che l’immagine copra tutto lo sfondo anche non mostrando tutta l’immagine, mentre contain ridimensiona l’immagine in modo che sia totalmente visibile sia in altezza che in larghezza.

Per ottenere gli effetti desiderati si consiglia di accoppiare tale propietà con background-repeat e background-position.