Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

CSS3: La proprietà background-size.

Scritto da Fare-internet il 21 marzo 2013 condividi condividi

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.

Twitter