Come sappiamo, se un'immagine di sfondo è più piccola della pagina web essa viene duplicata. A volte questo è utile (esistono a tal proposito immagini apposite molto leggere che riempono piacevolmente tutta la pagina), altre volte invece l'effetto non è affatto gradevole.
Per questo, con i css, è possibile fissare, e non duplicare, un'immagine di sfondo.
Se si vuole invece estendere, stirandola, un'immagine al 100% della pagina, dobbiamo creare uno stile apposito.
VISUALIZZA L'ESEMPIO
PASSO UNO
- porre altezza e larghezza del corpo del documento (body) al 100% togliendo ogni margine;
- creare un identificatore, ad esempio di nome sfondo, posizionato a partire dall'angolo in alto a sinistra, che abbia larghezza ed altezza al 100%, che non si muova e che sia sotto tutti gli altri elementi che aggiungeremo: esso conterrà l'immagine di sfondo.
Dovremo quindi inserire, fra i tag <HEAD> ed </HEAD>, il seguente codice:
E' stato necessario inserire un codice diverso per MSIE. Notare però che la proprietà overflow-y:hidden non funziona correttamente con IE8 e successivi.
Naturalmente potete aggiungere altre caratteristiche allo stile, come colore, font e così via. La cosa importante è usare la proprietà z-index = -1, che rappresenta il livello di sovrapposiione e che lascia lo sfondo dietro agli altri elementi.
PASSO DUE
Aggiungere l'immagine che volete come sfondo primo elemento della pagina web, e dargli l' id di sfondo:
|