Tutorial: Image over hele pagina

Opmerking vooraf:
Deze tut heb ik niet zelf geschreven. Ik heb 'm alleen even vertaald, omdat ik het zelf nodig had en 'm erg handig vond. Misschien dat jullie er ook ooit gebruik van willen maken.

Heb je wel eens klant (gehad) die op zijn website graag een foto of afbeelding als achtergrond wil, en daarmee het liefst de hele pagina daarmee 'opgevuld' wil zien? Niet echt mijn smaak, maar de klant is koning, dus je denkt "..doe ik even". Echter, niet iedereen heeft hetzelfde formaat beeldscherm en resolutie, waardoor het best lastig kan worden om het voor iedereen passend te krijgen. Hier is een goede oplossing:

1. Zorg dat alle browsers 100% hoogte hebben, en een margin en padding van 0. Dit zet je in je style sheet:
< style type="text/css" >
html, body {
height: 100%;
margin: 0;
padding: 0;
}
< /style >

2. Zet de afbeelding die je wilt gebruiken als achtergrond als eerste element in de
< body > en geef deze een 'bg id':
< img src = "jouw-afbeelding.jpg" alt = "achtergrond" id="bg" />

3. Positioneer de achtergrondafbeelding zodanig dat die linksbovenaan staat, en 100% height en width heeft. Zet dit in je style sheet:
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

4. Zet de content van de pagina's in een div die je 'content' noemt. Voeg dit toe in de
< body > onder de afbeelding:
< div id = "content" >Hier zet je alle inhoud, incl. headers, tables, afbeeldingen, enz.< /div >

Bijna klaar. :)
Als je nu naar je pagina kijkt, wordt de afbeelding volledig gestretched weergegeven, maar de pagina-inhoud is nergens te bekennen. Dat komt doordat de afbeelding 100% in hoogte is, en de inhoud (div id="content") daaronder is gezet.

5. Zet de content op position: relative, met een z-index van 1. Dit zorgt ervoor dat de inhoud 'bovenop' je achtergrond wordt geplaatst in standards-compliant browsers. Zet dit in je style sheet:
#content {
position:relative;
z-index:1;
}

6. Nog 1 aandachtspuntje: er zijn mensen die nog steeds gebruik maken van IE6, maar die is niet 'standards compliant' en heeft wat problemen. De gemakkelijkste manier om dit te omzeilen is de volgende. Zet het onderstaande in de < head >-sectie, onder je style sheet:
...
< /style >
< !-- [if IE 6] >
< style type = "text/css" >
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
< / style >
< ! [endif] -->


N.B. in sommige van de codes heb ik spaties gebruikt, omdat ze anders niet goed worden weergegeven, t.w. onder punt 1, 2, 4 en 6.

Getest in IE8, Firefox en Safari en Opera.
Bron: http://webdesign.about.com/