Hoe kan ik een achtergrondafbeelding viewport-vullend laten zijn?

Met de beschikbare eigenschappen voor een achtergrondplaatje gaat dat niet zomaar, maar je kunt een onder de eigenlijke content gepositioneerd plaatje gebruiken.

001  <html><head>
002  
003    <title>100% achtergrond</title>
004  
005    <style type="text/css">
006  
007      html, body, body img.bgImage {
008        margin     : 0;
009        padding    : 0;
010        width      : 100%;
011        height     : 100%;
012        overflow   : hidden;
013      }
014  
015      #contentContainer {
016        position   : absolute;
017        z-index    : 1;
018        left       : 0;
019        top        : 0;
020        width      : 100%;
021        height     : 100%;
022        overflow   : auto;
023      }
024  
025      #contentContainer div.content {
026        padding    : 2.5em;
027      }
028  
029    </style>
030  
031  </head>
032  
033  <body><img
034    class  = "bgImage"
035    src    = "achtergrond.jpg"
036    width  = "100%"
037    height = "100%"
038    border = "0"
039    alt    = ""
040   ></div><div
041    id = "contentContainer"
042   ><div
043     class = "content"
044    ><h1>Content...</h1>
045     <p>Regels om te kunnen scrollen....
046        Regels om te kunnen scrollen.... etc.</p>
047   </div></div>
048  
049  </body></html>