Achtergrondafbeelding schalen met layers en CSS

Door middel van layers (tag <div>) kunnen we een achtergrondafbeelding plaatsen die de volle breedte en hoogte van de window zal beslaan en zich aan de windowmaat aanpast.
Dit doen we door in <body> een <div> te plaatsen met height en width 100% en daarna in deze <div> de image <img> te plaatsen die we opnieuw een height en width geven van 100%.

Om vreemde gedragingen in IE te voorkomen is het wel zaak voor <body> met css de margins op "0 px" te zetten.
Als de windowproporties niet overeenkomen met de imageproperties zal de image de window niet geheel vullen, zorg daarom dat in <body> een kleur, patroon of image in de background geplaatst waardoor dit minder opvalt.

Hieronder de code die resulteert in de voorbeeldpagina.
Met highlight de codedelen essentiëel voor het schalen van een achtergrond met de windowmaat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../images/camera.ico" />
<meta name="robots" content="noindex, nofollow" />
<title>Familie Archief</title>

<style type="text/css">
<!--
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  background-image: url(../images/body_achtergrond.jpg);
  background-repeat: repeat;
  overflow-x:auto;overflow-y:hidden
  }

#imagewrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  }

#header {
  position:absolute;
  width:100%;
  height:115px;
  z-index:1;
  top: 100px;
  min-width: 800px;
  left: 0px;
  }


#home {
  width:100%;
  height:64px;
  z-index:2;
  position: absolute;
  text-align: center;
  top: 10px;
  min-width: 800px;
  }

#main {
  position:absolute;
  width:90%;
  z-index:3;
  left: 0px;
  top: 250px;
  margin-left: 5%;
  border: medium double #FF0;
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 24px;
  font-weight: bolder;
  color: #FF0;
  }

-->
</style>

</head>
<body>
  <div id="imagewrapper"><img src="../images/achtergrond.jpg" width="100%" height="100%" /></div>
  <div id="header"><img src="../images/header.gif" width="100%" height="100%" /></div>
  <div id="home"><a href="../../index.htm"><img src="../images/home.gif" width="40" height="40" alt="HOME" /><br />HOME</a></div>
  <div id="main">
  <p>&nbsp;</p>
  <p>Deze layer kan bijvoorbeeld een menu bevatten</p>
  <p>&nbsp;</p>
  <p>Probeer het resultaat door de grootte van de window te vari&euml;ren</p>
  <p>Let ook op hoe de header en de 'main' layer zich aanpassen. Kijk in de code hoe dit tot stand komt.</p>
  </div>
</body>
</html>