WPNews.nl

Achtergrond afbeelding en header

Achtergrond afbeelding en header

Een achtergrondafbeelding gebruiken als 
koptekstachtergrond (of een andere achtergrond).

Veel websites gebruiken afbeeldingen die geen juiste verhouding hebben

Het is de bedoeling dat een achtergrondafbeelding met bijvoorbeeld een koptekst goed functioneert op desktop, tablet en mobiel.

Voorbeeld verhoudingen destop en mobiel

Voordat je een beslissing neemt over de achtergrondafbeelding die je gaat gebruiken, kun je het beste een schets maken zoals deze. Teken gewoon een 1:1 vak en een 5:1 vak op de afbeelding. Controleer of er nog voldoende herkenbaarheid / bruikbaarheid overblijft.
Afbeelding site goede verhoudingen

Kleur, licht en donker

Blijft de tekst leesbaar?

Als er tekst over de achtergrondafbeelding wordt geplaatst, is het belangrijk om te kijken naar de donkere en lichte plekken binnen de afbeelding. De tekst moet immers leesbaar blijven. Houd rekening met de verdeling van de tekst, die op mobiel, tablet en desktop compleet anders is.

Zichtbare deel op desktop of laptop

Achtergrond afbeelding desktop

Hieronder staat er wat tekst in, als voorbeeld. Zoals je ziet, levert het lichte deel wat problemen op qua leesbaarheid.

Meditatie is je medicijn

De kunst van ontspanning en innerlijke reflectie – centreren om jezelf te zijn

Ook als de teksten donkerder zijn, blijft het slecht leesbaar. Deze foto is dus geen goede keuze om te gebruiken als achtergrond voor tekst. Daarnaast is ook de essentie van de foto verloren; deze is niet meer herkenbaar.

Meditatie is je medicijn

De kunst van ontspanning en innerlijke reflectie – centreren om jezelf te zijn

De herkenbaarheid kun je verbeteren, door de afbeelding (de sectie of container) een minimale hoogte te geven. In dit voorbeeld 250 pixels. Ook heeft de afbeelding nu een ‘overlay’ gekregen van transparant grijs, waardoor de tekst beter leesbaar is.

Meditatie is je medicijn

De kunst van ontspanning en innerlijke reflectie – centreren om jezelf te zijn

Op een mobiel apparaat zou de afbeelding met tekst ongeveer zo worden weergegeven. Door de witte tekst op het witte deel met grijze overlay, is de tekst al minder goed leesbaar. Bij de onderste versie staat de tekst alleen voor mobiel op rechtslijnen; dat is al beter. De tekst is beter leesbaar en de afbeelding is beter zichtbaar.

Meditatie is je medicijn

De kunst van ontspanning en innerlijke reflectie – centreren om jezelf te zijn

Meditatie is je medicijn

De kunst van ontspanning en innerlijke reflectie – centreren om jezelf te zijn

Afbeelding (cover) positie

Je hebt bij de meeste pagina builders invloed op het deel van de afbeelding dat als ‘centrum’ wordt beschouwd. Bij een afbeelding kun je kiezen uit meerdere opties qua vertonen. Je kunt het zo instellen dat de afbeelding altijd als geheel getoond wordt (als achtergrond van een header nooit doen) of ‘Cover’. Cover wil zeggen dat er steeds een deel van de afbeelding getoond wordt. Dat deel is afhankelijk van de verhouding van de container of kolom die de afbeelding als achtergrond gebruikt. Daarbij is het van belang dat het juiste deel gebruikt wordt. De grote stip geeft het deel aan dat het midden is. De builder zal dat steeds aanhouden als midden, zowel verticaal als horizontaal. Zo kun je voorkomen dat bijvoorbeeld alleen de begroeiing of het water zichtbaar is.
Afbeelding Cover positie

Om te onthouden

  • Op mobiele apparaten zijn de verhoudingen 1:1 tot 1:2 (hoogte/breedte)
  • Op een tablet zijn de verhoudingen 1:3 tot 1:5 (hoogte/breedte)
  • Op een bureaublad zijn de verhoudingen 1:5 tot 1:8 (hoogte/breedte)
  • Zelfs als alleen het midden van de afbeelding zichtbaar is, moet de afbeelding nog steeds bruikbaar zijn.
  • Een te groot verschil tussen lichte en donkere delen maakt het toepassen van de afbeelding veel lastiger.

Translate »