Una tecnica molto utilizzata nei siti web consiste nell’inserire un’immagine di sfondo di forte impatto visivo, che possa andare a coprire l’intero background del sito indipendentemente dalla risoluzione del monitor o dalla dimensione della finestra del browser.
Si utilizza un’immagine di grandi dimensioni, per esempio 1920×1200 pixel che è una delle risoluzioni maggiori che possiamo trovare nei monitor più recenti di 21 o 24 pollici, che possa coprire l’intero schermo. Mentre il contenuto principale del sito continua a rimanere in una “gabbia” di dimensioni inferiori (generalmente 960 pixel di larghezza), per assicurare la perfetta visibilità anche in quei monitor che supportano la risoluzione minima di 1024 pixel di larghezza (presente anche nei più recenti netbook con monitor a 10 pollici).
Di solito l”immagine viene gestita tramite i CSS e inserita come background del tag <body>:
body { background: url(immaginedisfondo.jpg) no-repeat 0 50% #fff }
immaginedisfondo.jpg sarà posizionata come sfondo della pagina, rimarrà centrata orizzontalmente (0 50%) e quando il contenuto della pagina è superiore alle dimensioni dell’immagine e comporta uno scroll verticale per leggerne i contenuti, lo sfondo assumerà il colore bianco #fff.
Con questo tipo di posizionamento ci assicuriamo che la parte centrale dell’immagine sia sempre visibile a tutte le risoluzioni, con l’inconveniente che a risoluzioni inferiori (1024 pixel) non vedremo una parta ampia della foto.
Per ovviare a questo problema si può utilizzare un’altra tecnica che rende adattabile la dimensione della foto alla risoluzione della finestra del browser permettendo così di avere sempre una visione completa dell’immagine.
Prendendo spunto dall’articolo e dagli esempi segnalati da Julius Design, si inserisce l’immagine all’interno dell’HTML con lo specifico tag img
<img class=”bg” src=”immaginesfondo.jpg” alt=”” />
e poi si assegna il seguente stile CSS:
img.bg {position: fixed;top: 0;left: 0;width: 100%;min-width: 1024px;z-index: -9999;}
che posiziona l’immagine sullo sfondo (position: fixed; z-index:-9999) con una larghezza che si adatta alla finestra del browser (width: 100%). L’immagine rimarrà sempre proporzionata perché non abbiamo dato nessun vincolo all’altezza.
Il min-width serve per bloccare il ridimensionamento della foto quando la finestra del browser assume dimensioni inferiore ai 1024 pixel.
P.S: non funziona con Internet Explorer 6 (IE6).