De Achtergrond van een WordPress Thema

Een webpagina bestaat uit een hoofddeel, de eigenlijke pagina, en een achtergrond. Als je een browservenster opent, kun je over het algemeen meteen onderscheid maken tussen het gedeelte waar het om gaat en de schermvulling.

De kernpagina omvat de header, het contentgedeelte, de zijbalk(en) en de footer. Afgezien van het contentdeel zijn eigenlijk alle delen optioneel.

Het voorgaande betekent niet dat de achtergrond er niet toe doet, in tegendeel. De achtergrond is vaak de sfeermaker van een de webpagina. Ook de leesbaarheid van de pagina wordt sterk beïnvloed door de achtergrond.

Je kunt de achtergrond van het Twenty Eleven thema aanpassen via het WordPress menu (Weergave >> Achtergrond).

De pagina Aangepaste achtergrond kent drie onderdelen:

• Voorbeeld
• Afbeelding selecteren
• Achtergrondkleur

Het Voorbeeld toont het resultaat van de geselecteerde afbeelding en achtergrondkleur.

De Achtergrondkleur van een Webpagina

De standaard achtergrondkleur van het Twenty Eleven thema is een grijstint met de hexcode #F1F1F1. Grijstinten worden veel gebruikt omdat deze min of meer neutraal van kleur zijn en daardoor niet als storend worden ervaren.

Als je de webpagina bekijkt zul je zien dat die een zekere rust uitstraalt en de volle aandacht als het ware automatisch naar de content gaat. Er is bovendien een duidelijk contrast met de contentpagina. Deze wijze van paginaopmaak wordt een vaste layout genoemd – in het Engels fixed of boxed.

Laten we de grijze tint eens vervangen door wit. In het invoerveld Achtergrondkleur typen we de hexcode #FFFFFF in – kleine of hoofdletters maakt hier niets uit. Na de invoer drukken we op de knop [Wijzigingen opslaan]. Bovenaan in het scherm verschijnt de link Bezoek je site in een gele vlak.

Als we de webpagina opnieuw bekijken dan zien we nu dat de achtergrond van de webpagina en de achtergrond van de contentpagina beide wit zijn. Deze pagina opmaak noemt men vloeibaar. In het Engels wordt dit fluid of stretched genoemd. De webpagina en contentpagina vloeien in elkaar over.

De Achtergrondafbeelding van een Webpagina

Voor de achtergrondafbeelding kun je een afbeelding kiezen die groot genoeg is om het hele beelscherm te vullen. Technisch is dat geen probleem, maar dit stuit gauw op praktische problemen.

Vaak zal een beeldschermvullende afbeelding ook fysiek groot zijn, dat wil zeggen uitgedrukt in kilobytes, of misschien wel megabytes. Het downloaden van een dergelijke grote afbeelding duurt dus langer, op mobiele apparaten al snel te lang.

Gelukkig is er een alternatief. Je neemt een kleine afbeelding, die vervolgens wordt herhaald. Dit is wat wij gaan doen. Heb je zelf geen kleine afbeelding bij de hand, dan kun je de afbeelding dambord.gif downloaden van deze website.

Via de [Browse] knop ga je naar de gewenste plek op jouw machine. Selecteer de afbeelding en klik op de knop [Uploaden]. Je ziet meteen het resultaat in het Voorbeeld.

Zodra je een afbeelding uploadt, verschijnt er onder het Voorbeeld een nieuwe knop [Verwijder achtergrondafbeelding]. Hiermee draai je het uploaden dus weer terug. Ben je tevreden met het resultaat, dan druk je op de knop [Wijzigingen opslaan]. Bovenaan in het scherm verschijnt weer de link Bezoek je site in een gele vlak.

Als je de dambordafbeelding hebt bekeken zul je een verschil constateren met het Voorbeeld. In het Voorbeeld wordt het dambord namelijk herhaald. De afbeelding wordt zelfs in twee richtingen herhaald; horizontaal (x) en verticaal (y), Denk maar aan de x- en y-as uit de wiskundeles.

Behalve in beide richtingen, kunnen afbeeldingen ook uitsluitend horizontaal worden herhaald, uitsluitend verticaal, of in het geheel niet. In het laatste geval wordt de afbeelding maar één keer weegegeven.

Voor de Achtergrondafbeelding kun je dit aangeven bij Weergave-instellingen. Met Positie bepaald je waar de afbeelding wordt gepositioneerd; links, midden of rechts.

Bij Herhalen geeft je aan of, en zo ja, hoe de afbeelding wordt herhaald; alleen horizontaal, alleen verticaal of in beide richtingen.

Met de Bijlage bepaal je of de achtergrondafbeelding scrollt of statisch is. Scrollen houdt in dat de afbeelding mee loopt met de pagina; dus zowel de achtergrond als de contentpagina scrollen naar beneden of naar boven.

Is de afbeelding gefixeerd, dan blijft de achtergrond staan en scrollt alleen de pagina. Nu is dit verschil met een zogenaamde tegelbare afbeelding als het dambord moeilijk waarneembaar. Met dit WordPress logo is het verschil wel duidelijk te zien.

Tenslotte kun je ook nog een Achtergrond kleur kiezen, dat is echter alleen zinvol als de achtergrondafbeelding niet de gehele achtergrond afdekt, of als deze deels transparant is, dat wil zeggen doorschijnend is. Dat laatste is bij ons dambord niet het geval.

De Achtergrond als Sfeermaker

We verwijderen nu de achtergrondafbeelding en kiezen een nieuwe achtergrondkleur. Deze keer geel. We voeren de hexcode #FFF000 in en slaan onze wijzigingen op. Als je nu de voorzijde bekijkt zie je dezelfde pagina, maar op een knalgele achtergrond. Via de link (Standaard) – helemaal rechts achter Achtergrondkleur – kun je snel terug naar de oorspronkelijke grijstint.

We hebben nu dezelfde pagina, met verschillende achtergronden gezien. Elke keer ademde de website een geen andere sfeer uit. Kortom, de achtergrond is inderdaad meer dan schermvulling. De vraag is dus: Wat wil je uitstralen?

—

De hier gebruikte dambordafbeelding is afkomstig uit de ClipArt Collectie van About.com, een onderdeel van de New York Times.