09 Jan, 2010
Altijd passende achtergrondafbeelding
Categoriën: crossbrowser |hack |IE6 |Images |solution |Xhtml Strict
Een achtergrond afbeelding, die altijd past, of het browser-venster nu groter of kleiner gemaakt wordt.
HTML
<div id="page-background"><img src="images/bordering.jpg" width="100%" height="100%" alt="background" /></div> <div id="content"> <p>uwen inhoud hier</p> </div> </div>
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
#page-background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
padding:10px;
}
Voor Internet Explorer 6
CSS
<!--[if IE 6]>
html {
overflow-y:hidden;
}
body {
overflow-y:auto;
}
#page-background {
position:absolute;
z-index:-1;
}
#content {
position:static;
padding:10px;
}
<![endif]-->
