Achtergrond afbeeldingen gebruiken in CSS

Voorbij gewone HTML-achtergronden

Katinka Hesselink 2006

In gewone HTML (welke versie dan ook) is er maar een manier om achtergrondafbeeldingen te gebruiken. Daarbij tegelen de afbeeldingen alle kanten op. In andere woorden, ze worden, horizontaal en verticaal herhaald, het hele vlak van het scherm vullend. 

Met CSS kan het anders: Je kunt een achtergrond afbeelding overal op de pagina zetten, horizontaal laten herhalen en verticaal laten herhalen. Daarbij is de preciese plaatsing vaak wat ingewikkeld, maar er kan aan de andere kant heel erg veel.

Beeld-vullende achtergrond-afbeelding: horizontaal en verticaal tegelend

Dit is de manier die het vaakst gebruikt wordt: je vult het beeld met een afbeelding en die wordt horizontaal en verticaal herhaald. De subtiele achtergrond van dit artikel is hier een voorbeeld van. Het voordeel van CSS begruiken om dit tot stand te brengen is, zoals altijd bij CSS: je kan het uiterlijk van meerdere pagina's tegelijk met veranderen door een regel in een (extern) CSS bestand te veranderen.

body {background: #FaFdFf url(achter_wit.gif);}

Omdat body het hele document omvat, heb ik een achtergrond kleur die lichtblauw is en daaroverheen een subtiele verticale golving.

Ik heb in de CSS-file niets gezegd over hoe er herhaald moest worden, en dus doet de computer wat hij standaard doet: horizontaal en verticaal herhalen. Eventueel zou ik echter toe kunnen voegen:
body {background: #FaFdFf url(achter_wit.gif);
background-repeat: repeat;}

Als ik wil dat een plaatje maar een keer getoond wordt, dan wordt het:
body {background: #FaFdFf url(achter_wit.gif);

background-repeat: no-repeat;}

no-repeat, oftwel, niet herhalen.

Horizontaal herhalen doe ik door toe te voegen:

body {background: #FaFdFf url(achter_wit.gif);
background-repeat: repeat-x;}

Denk terug aan je wiskunde lessen: de x-as is horizontaal, dus betekent repeat-x dat je langs de x-as, dus horizontaal herhaalt. Je kunt niet opgeven hoe vaak je wilt dat er herhaald wordt: het gaat schermvullend, maar alleen in de horizontale richting.

Verticaal herhalen gaat als volgt:

body {background: #FaFdFf url(achter_wit.gif);
background-repeat: repeat-y;}

Denk weer aan de y-as. 

Voor de voorbeelden gebruik ik het volgende plaatje:

voorbeeld plaatje

Kijk voor de preciese CSS van deze voorbeelden in de broncode van de HTML-pagina. 

Het leuke is dat je deze trucjes op alle elementen in een document toe kunt passen. Een paar voorbeelden.

Om de voorbeelden helemaal te kunnen begrijpen, moet je ook weten hoe je de achtergrond-afbeeldingen een plek geeft, met CSS.