full_screen

CSS: immagine di sfondo a tutto schermo

Sei un grafico alla ricerca di un nuovo lavoro?
Su Bakeca.it trova gli annunci dedicati a te!

 

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 [...]

Facebook Twitter

 

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)