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]-->

Gerelateerde Snippets

1 Reactie op "Altijd passende achtergrondafbeelding"

chick

January 24th, 2011 at 23:07

1

BRILJANT, DANKJEWEL.

Reactie formulier


Demo: Altijd passende achtergrondafbeelding:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.