Sfondo pagine web a tutto schermo
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>"
Commenti
Posta un commento