Qualche righe di css, per impostare un immagine di sfondo al 100% ridimensionabile con la finestra del browser.

Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno una larghezza e altezza di 100%.
Le loro margine (margin) e ’spazi cuscinetti’ (padding) sono azzerati per evitare tutto spazio bianco intorno.
Con la proprietà css overflow evitiamo che vengono visualizzate le barre di scorrimento della finestra del browser. Finalmente, l’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.

Le regole css usate:

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#sfondo{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}

Visualizza la pagina di prova…

Condividi questo articolo su