immagine a tutto schermo

**Alessandro_b** · 03-06-2013, 13:34

Buongiorno,
vorrei inserire un'immagine di sfondo a tutto schermo che si ridimensioni e si centri automaticamente, cross browser, e visibile bene sui vari dispositivi come tablet e smarthphone. Sapete consigliarmi un buon script?
grazie a tutti

**carlomarx** · 03-06-2013, 14:20

codice:

<style type="text/css">
body {
	background: url("sfondo.png") no-repeat fixed center center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}
</style>

oppure:

codice:

<style type="text/css">
body {
	background: url("sfondo.png") no-repeat fixed center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
</style>

Vedi anche:

Se hai problemi fatti spostare nella sezione giusta: è un problema di CSS

**Alessandro_b** · 25-06-2013, 20:09

grazie per la risposta, però rimane un problema, la retrocompatibilità. Come faccio per le versioni precendenti a IE9 (mi interessa la proprietà cover)?
Grazie

**Nobody33** · 25-06-2013, 21:14

funziona per qualunque browser:

codice:

css:

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

#sfondo{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
} 
#sfondo2 {position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}

html:
<body>
<div id="sfondo" >
 [img]immagine.jpeg[/img]
</div>
</body>

Discussione: immagine a tutto schermo

Strumenti discussione

Ricerca discussione

Visualizza

immagine a tutto schermo

Permessi di invio