Maurizio Condini - Defcon.it Blog » sfondo http://blog.defcon.it Solo un altro blog... Tue, 24 Aug 2010 00:40:20 +0000 en hourly 1 http://wordpress.org/?v=abc Sfondo pagine web a tutto schermo http://blog.defcon.it/2008/06/sfondo-pagine-web-a-tutto-schermo/ http://blog.defcon.it/2008/06/sfondo-pagine-web-a-tutto-schermo/#comments Fri, 27 Jun 2008 08:45:25 +0000 acecondor http://blog.defcon.it/?p=12
 Link sponsorizzato 

css.png

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>

Esempio: http://www.htmlite.com/faqEX004b.html

Fonte: http://www.htmlite.com/faq022.php

]]> http://blog.defcon.it/2008/06/sfondo-pagine-web-a-tutto-schermo/feed/ 0