Se volete fare in modo che l’immagine visualizzata nelle sfondo sia ridimensionata a tutto schermo, indipendentemente dalla risoluzione utilizzata da chi vede la pagina, dovete utilizzare un piccolo trucco; in pratica per lo sfondo non sarà utilizzata la classica caratteristica background-image ma grazie all’utilizzo degli stili (CSS) una normale immagine viene ridimensionata in full screen, e messa come livello inferiore rispetto agli altri contenuti.
Il codice è il seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type=”text/css”>
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!–[if IE 6]>
<style type=”text/css”>
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]–>
</head>
<body>
<div id=”bg”><img src=”yourimage.jpg” width=”100%” height=”100%” alt=””></div>
<div id=”content”><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>
12 Novembre, 2010 20:08
ciao Maurizio…. ho seguito alla lettera le tue indicazioni però ho riscontrato qualche problema… su opera non funziona, nel senso che con lo scorrere della pagina lo sfondo sotto rimane bianco e con internet explorer mi rimane tutto bloccato…. come posso risolvere????
ti ringrazio per l’attenzione e la disponibilità
paolo
12 Novembre, 2010 20:36
Ciao Paolo,
ho provato con FF 4.0B7, IE8 e Opera 10.63 senza riscontrare problemi (immagine full screen fissa, testo scorre).
Controlla quindi di aver fatto tutto corretamente.
12 Novembre, 2010 20:51
si vero!!!!!!!!!!!!!! grazie grazie!!!!!!!
12 Novembre, 2010 20:53
grazie ancora per il suggerimento e il post!!!! si è rivelato molto utile!!!!!! grazie
12 Novembre, 2010 21:02
Ho capito dov’è l’errore… praticamente quando applico lo stile per ie 6 che mi crea problemi….
un dubbio, ma si scrive come da te riportato o ,cioè con due trattini?
grazie ancora per la disponibilità e attenzione
paolo
24 Novembre, 2010 11:11
Mitico… mi hai salvato!!!!
22 Settembre, 2011 10:59
Gente: qui il codice per IE9 che come sapete cambia dagli altri; se sviluppate con open source vi sarà di vero aiuto. Renderà le vostre pagine visibili anche su IE9
Inseritelo al posto di quello già presente:
Codice concesso da Google 😉