HOME
Home

Contatti

TRUCCHI E MALIZIE NUMERO 59

IMMAGINE DI SFONDO AL 100% DELLA PAGINA

Argomenti collegati.

 


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

  1. porre altezza e larghezza del corpo del documento (body) al 100% togliendo ogni margine;
  2. 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:

©2004-2011 www.webfract.it