background-image
Oltre al colore, puoi inserire anche un’immagine di sfondo. Per quanto riguarda le immagini, devi tenere in considerazione anzitutto il loro formato e quindi la loro estensione. Usa .jpg solo se l’immagine ha tanti colori o è molto grande, mentre usa .png se l’immagine deve avere una trasparenza con una resa fotografica. Infine, usa .gif se hai un’icona o un’immagine che deve avere una trasparenza, ma che ha pochi colori (in una .gif puoi usare al massimo 256 colori)1. Infine, ricordati che con i browser più moderni puoi utilizzare anche .svg (Scalable Vector Graphic), di cui vedremo qualcosa in più nel capitolo 7 “Pillole di utilità”.
Un’ulteriore fattore di cui devi tener conto è il peso: devi ridurre e ottimizzare il più possibile un’immagine. Ricordati che più è leggera l’immagine, più rapidamente verrà scaricata dal browser e, quindi, più velocemente verrà visualizzata2. Purtroppo Adobe Photoshop non basta! L’opzione “Esporta per il web”, presente in tutte le versioni più recenti del noto programma di grafica, da sola non basta. Spesso è necessario utilizzare altri programmi per abbattere ulteriormente i pesi e rendere le tue immagini ancora più leggere.
Ultimamente, sono stati creati e rilasciati molti tool e programmi per la compressione e l’ottimiazzazione delle immagini. Da questa lista http://perf-tooling.today/tools?q=compression puoi avere una rapida panoramica dei programmi che ti possono essere utili per ottimizzare le tue immagini.
La sintassi per utilizzare un’immagine come sfondo è la seguente.
Ricorda, ovviamente, di modificare il percorso dell’immagine secondo la tua gestione e organizzazione del progetto. E ricorda anche che le immagini e i file allegati ad un CSS si riferiscono sempre alla posizione del CSS — non alla posizione della pagina HTML — rispetto alla risorsa linkata. Questo significa che, nell’esempio riportato più sopra, il CSS sta allo stesso livello di una cartella chiamata images, al cui interno ci sarà un’immagine .png dal nome my_image. Tutto questo, indipendentemente dal fatto che l’HTML al quale è legato questo CSS si trovi 20 cartelle sopra!
Per richiamare immagini, inoltre, puoi utilizzare anche indirizzi assoluti.
div{
background-image: url(http://www.mysite.it/images/my_image.png);
}