Achtergrond afbeeldingen gebruiken in CSS

De plek bepalen (positioneren)

Katinka Hesselink 2006

Lees eerst het artikel over hoe je achtergrond-plaatjes al dan niet kunt laten herhalen, met behulp van CSS.

In dit artikel laat ik zien hoe je achtergrond-plaatjes die je in je CSS-bestand definieert, niet alleen horizontaal of verticaal kunt laten herhalen, maar ook vrij precies een plek kunt geven. Sommige plekken zullen iets makkelijker te doen blijken dan andere...

Eerst de maten. Je kunt aangeven waar het plaatje (of de plaatjes, als je herhaalt) kunt laten beginnen met de volgende maten:

Top Bottom, Center, Left en Right

Deze maten zijn het makkelijkst en geven me gelegenheid om de basis aan te geven. Net zoals wiskundige coordinaten gaat bij de plek van de achtergrond-afbeelding horizontaal eerst, en dan verticaal (eerst x, dan y)

Dat wil dus zeggen dat je een plaatje in de linkerbovenhoek zet met:

body {background: #FaFdFf url(achter_wit.gif);
background-position: left top;}

Procenten

Procenten zijn misschien wel de verwarrendste manier om een plaatje een plek te geven. Je positioneert namelijk niet de linkerhoek, of het midden van het plaatje, maar een percentage van een plaatje... Verwarrend - dat dacht ik al. 

background-position: 30% 50%;

Dit betekent dat je horizontaal 30% van de rand van je scherm gaat zitten. Wat komt daar terecht: in het plaatje een lijn 30% van de linkerrand van het plaatje. 50% betekent, zoals je zou verwachten, dat het plaatje verticaal in het midden komt te staan.

background-position: 100% 100%;

Dit betekent dat de rechterrand van het plaatje (dus 100% afstand van de linkerrand) terecht komt tegen de rechterrand van het scherm of het element waar je mee bezig bent. Vervolgens onderaan. Dit is dus hetzelfde als

background-position: right bottom;

Lengtematen: pixels en em's

Deze maten gebruik ik zelf het vaakst als het om afbeeldingen gaat. Pixels zijn handig omdat het plaatje een formaat heeft in pixels. Em's zijn handig als je de plek van het plaatje afhankelijk wilt laten zijn van de grootte van je letters.

Kijk nog eens naar de code van de voorbeelden: 

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

Aandachtspunten