Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno larghezza e altezza di 100%, il margin e il padding sono azzerati.
Con la proprietà overflow evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser. L’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e poter essere ridimensionata correttamente.
Ecco il codice HTML…
…a cui associamo [...]
Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno larghezza e altezza di 100%, il margin e il padding sono azzerati.
Con la proprietà overflow evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser. L’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e poter essere ridimensionata correttamente.
Ecco il codice HTML…
</pre>
<img id="sfondo" src="bg.jpg" alt="" />
<pre>
…a cui associamo queste righe di CSS:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#sfondo{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}
Ecco il risultato , lo sfondo nella pagina d’esempio.
Se invece avete bisogno cHe la vostra immagine mantenga le proporzioni ad ogni rislozione, consultate quest’articolo: Immagine di sfondo CSS scalare (SCALABILE)
Se ritieni che questo articolo sia interessante , condividilo sulla tua pagina o su un forum