Zoals je ziet, heb ik een foto als achtergrond van deze website-pagina gebruikt.
En het leuke is: als je je browservenster gaat verkleinen of vergroten, verkleint of vergroot de afbeelding gewoon mee.
Hoe maak je nu zoiets?
Je begint ermee de foto die je als achtergrond wilt laten zien geschikt te maken
voor opname in je website. Want het bestand van een foto die je met je digitale camera hebt gemaakt, is veel te groot.
Zou je die op je website zetten, dan moeten je bezoekers veel te lang wachten voordat hun browser die foto heeft ingeladen.
(Ik probeer er zelf altijd voor te zorgen dat de afbeeldingen die ik op mijn site gebruik, niet groter zijn dan 100kB.)
Het eerste wat je dus moet doen, is je afbeelding verkleinen.
Verder wil je natuurlijk dat de tekst van je website goed te lezen blijft,
dus in het voorbeeld van deze pagina heb ik de afbeelding voor de achtergrond wat lichter gemaakt.
In het gratis fotobewerkingsprogramma IrfanView,
doe je dat door op het tabblad Image te klikken,
en dan te kiezen voor 'Enhance color'. Daarna speel je met de schuifjes onder de woorden 'Brightness' en 'Contrast' totdat je
tevreden met het resultaat.
Omdat ik mijn achtergrondfoto alleen op déze pagina wil laten zien,
zet ik de codes daarvoor in de html-pagina zelf. Als jij je achtergrondafbeelding op álle pagina's van je website wilt laten zien,
dan kun je natuurlijk beter de benodigde codes in je css-bestand zetten.
Om de achtergrondfoto van de sneeuwklokjes te laten zien, heb ik eerst de code <body> (vrij bovenaan mijn html-bestand) veranderd in:
<body style="background-color: transparent; position: relative; z-index: 0;">
Direct daarna heb ik de code neergezet voor de afbeelding die ik wil laten zien:
<img alt="sneeuwklokjes" src="sneeuwklokjes.jpg" style="width: 100%; height: auto; position: absolute; z-index: -1;">
En als laatste heb ik nog alle elementen die verder op mijn pagina voorkomen, de waarde background-color: transparent; meegegeven
(net zoals in de body-tag). Door dat te doen, schijnt de achtergrondfoto door in mijn menubalk en in de andere elementen die ik heb gebruikt.
Dus de code voor mijn voetregel bijvoorbeeld, heb ik veranderd in:
<div id="voet" style="background-color: transparent;>.
Als je ervoor hebt gekozen de veranderingen aan te brengen in je css-bestand (je stylesheet),
omdat je de afbeelding op al je pagina's wilt laten zien, dan wordt het:
#voet {
background-color: transparent;
Er is één nadeeltje aan deze manier van een background instellen:
Als de hoeveelheid tekst op je pagina te lang wordt, is onder het laatste stuk van je pagina geen afbeelding meer te zien.
Dit probleem is op te lossen door in de code voor je afbeelding position: absolute; te veranderen in: position: fixed;
(zoals ik op deze pagina heb gedaan),
maar dit heeft weer als nadeel dat je bezoekers die je site bekijken met Internet Explorer 6 alleen je afbeelding zien, en niet de tekst.
En omdat er op dit moment nog steeds zo'n 5% van mijn bezoekers IE 6 gebruikt, heb ik zelf gekozen voor de versie met de code position: absolute;.