Molto spesso ci capita di vedere siti web che adottano come background immagini a tutto schermo. Queste immagini si adattano alla pagina del browser, si ridimensionano a seconda della risoluzione del monitor dell'utente.
Il plus di questa nostra versione è che non si ridimensiona solo l'immagine ma direttamente tutto il sito, nel senso che all'occorrenza si presenta la barra di scorrimento che rende visibile i contenuti a qualsiasi risoluzione.
Questo effetto si può ottenere senza usare javascript, giocando soltanto con i CSS.
Ecco come:
<head>
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#bg {
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
z-index:1;
}
#content {
width: 100%;
height: 100%;
position:absolute;
left: 0;
top: 0;
z-index:2;
overflow-y: scroll;
}
</style>
</head>
<body>
<img src="images.jpg" id="bg" width="100%" height="100%"
alt=""></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
Le dimensioni della pagina devono essere al 100%, con margini e padding azzerati onde evitare spazi vuoti. Con la proprietà overflow:hidden evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser.
Anche le dimensioni di #bg devono essere al 100%, così come l'immagine inserita al suo interno.
L'aggiunta della proprietà position:absolute permette di rimuovere il div dal flusso naturale della pagina, così da posizionarlo in alto e sinistra con le specifiche top e left.
Per quanto riguarda #content, le proprietà position:assolute e z-index ne regolano la posizione, o meglio la sovrapposizione con #bg. In questo caso, il valore 2 della z-index di #content lo pone al di sopra di #bg che ha il valore 1. Overflow-y: scroll è la proprietà che permette lo scorrimento della pagina in caso di risoluzioni ridotte.
Un trucco easy, compatibile con tutti i browser.
bloggers 
Marco Napolitano 
Jader Jed Francia 
Paolo Gambetti 
Katia Pazzi 
Ezio Lombardi 
Chiara Mambretti 
Serena Traversi 
Francesco Falanga 
Antonio Musarra 
Simone Celli Marchi 
