WordPress achtergrondafbeeldingen: Hoe ze toe te voegen, te bewerken en aan te passen

WordPress achtergrondafbeeldingen zijn er in allerlei vormen. Je kunt een achtergrondafbeelding voor de gehele website uploaden, achter knoppen plaatsen, of een achtergrond met een effen kleur voor je loginpagina instellen. Ongeacht waar je ze wilt plaatsen, het is essentieel om de basisprincipes van het uploaden van een afbeelding, inclusief een achtergrondafbeelding, te begrijpen.

In dit artikel wordt uitgelegd wat een achtergrondafbeelding is en hoe je deze kunt bewerken voor een beter resultaat. We behandelen ook hoe je snel achtergrondafbeeldingen activeert op je site en hoe je eventuele problemen oplost die onderweg kunnen optreden.

Enthousiast? Laten we beginnen!

Bekijk onze videogids over het toevoegen van WordPress achtergrondafbeeldingen:

Wat is een WordPress achtergrondafbeelding?

Een WordPress achtergrondafbeelding dient als de volledige achtergrond van jouw website. Het wordt ook wel een aangepaste (custom) achtergrond genoemd.

Een achtergrond kan ook een effen kleur zijn.

Ongeacht de optie die je kiest, het functions.php bestand gaat over de achtergrondafbeelding in een WordPress thema. Het wordt ook weergegeven door het header.php bestand van WordPress.

Als gevolg hiervan hebben thema-ontwikkelaars meer controle over het al dan niet activeren van de aangepaste-achtergrondfunctionaliteit binnen jouw WordPress thema. Je kunt de functionaliteit nog steeds Aan of Uit zetten, maar het thema van jouw site dicteert meestal de standaardinstellingen.

Er zijn verschillende soorten achtergronden die je kunt implementeren op WordPress. Je kunt kiezen voor een standaard volledige achtergrond of een die achter specifieke elementen zit, zoals zijbalken en artikelen.

Aangepaste achtergronden zijn ook mogelijk voor meer specifieke locaties op de WordPress site:

• Achter een WordPress pagina of bericht
• Op een WordPress categoriepagina
• Binnen een contentblok van een pagina of bericht
• Op de Login pagina
• Achter het navigatiemenu
• Op de pagina’s Onderhoud of Binnenkort

In het algemeen, als aangepaste achtergronden zijn ingeschakeld binnen een thema, dan heeft de gebruiker de mogelijkheid om een afbeelding te uploaden of een kleur te kiezen om de gehele achtergrond van de site te vullen.

De instellingen zijn te vinden in het WordPress dashboard onder Appearance > Customize > Background Image. Andere soorten achtergronden zijn echter mogelijk via drag-and-drop paginabouwers, plugins, en andere opties.

Het uploaden van een achtergrondafbeelding naar het dashboard is slechts een deel van het proces. Daarna moet je de instellingen voor de achtergrondafbeelding configureren. Soms kun je de instellingen laten zoals ze zijn, terwijl het andere keren belangrijk is om de instellingen te her-configureren om ervoor te zorgen dat de afbeelding er uitstekend uitziet.

Instellingen voor een WordPress achtergrondafbeelding omvatten:

• Achtergrondkleuren
• Formaat
• Positie van de afbeelding
• Of de afbeelding al dan niet herhaald moet worden
• Opties om het scherm te vullen of de afbeelding uit te rekken

We zullen eerst de beste manieren bespreken om een WordPress achtergrondafbeelding te gebruiken. Daarna gaan we in op hoe je een WordPress achtergrondafbeelding in verschillende situaties kunt instellen.

De vele stijlen achtergronden

Een groot voordeel van een WordPress achtergrond is dat het niet allemaal statische afbeeldingen zijn. Je kunt verschillende soorten achtergronden tegenkomen, variërend van video’s tot fotopatronen tot diavoorstellingen.

Het is vaak mogelijk om unieke achtergronden te gebruiken met behulp van aangepaste CSS of plugins (of beide). We laten je beide methodes zien in dit artikel.

Hier zijn enkele achtergrondstijlen om te overwegen:

• Achtergrond met effen kleur: De effen kleuren achtergrondafbeelding komt van pas wanneer je wat levendigheid aan je site wilt toevoegen, maar geen afbeelding hebt die bij je merk past of die er goed uitziet als achtergrond. Een achtergrond in simpele kleuren geeft ook een netter en professioneler beeld, en het duurt niet lang om ze te implementeren. Ze zijn geweldig voor het afstemmen van jouw branding zonder aangepaste code of een plugin nodig te hebben.
• Gradient achtergronden: Een achtergrond met kleurverloop gaat over van de ene kleur naar de andere. Het is visueel aantrekkelijker dan een effen kleur, kost niet veel tijd om toe te voegen, en je kunt er een toevoegen met een van de vele plugins. Het grootste nadeel is dat een voorgrond aan de ene kant van het kleurverloop goed te zien is en aan de andere kant niet.
• Patroon- of textuurachtergronden: Alle patroon- en textuurachtergronden zijn foto’s, maar ze richten zich op repetitieve items in de afbeelding of een close-up textuur, zoals een houten paneel of een stukje gras. Het mooie van een patroon of textuur is dat het wonderen doet als achtergrond, aangezien je het kunt uitrekken, en de meeste mensen zullen het niet merken als er een onderbreking in het patroon is, als de afbeelding niet groot genoeg is.-
• Diavoorstelling met afbeeldingen als achtergrond: Een diavoorstelling met afbeeldingen als achtergrond stelt site-eigenaren in staat om meerdere soorten ontwerpen of foto’s te delen op de achtergrond. Je kan hiermee de sfeer aanpassen terwijl een klant scrolt door jouw site. Diavoorstellingen kunnen echter ook storend overkomen of de site vertragen.
• Video-achtergronden: Videoachtergronden zijn boeiend, leuk om naar te kijken, en erg geschikt om de kern van jouw merk uit te beelden. Ze leiden echter ook tot prestatieproblemen als ze niet correct worden uitgevoerd en kunnen de aandacht van jouw salesfunnel wegnemen. Bovendien moeten achtergrondvideo’s de perfecte afmetingen hebben en op het juiste moment worden afgespeeld. Ze kunnen ook duur zijn om te maken, tenzij je kiest voor gratis stockvideo’s.

Best practices voor het gebruik van WordPress achtergrondafbeeldingen

Het instellen van een aangepaste achtergrondafbeelding lijkt een eenvoudige taak. Je uploadt de afbeelding naar de juiste plaats en ziet hem vanzelf aan de voorkant verschijnen, toch?

Meestal is dat het geval, maar soms kan de achtergrondafbeelding wat beetje lastig doen. Daarom raden wij je aan de best practices voor WordPress achtergrondafbeeldingen te volgen om zo veel mogelijk problemen te elimineren.

Tips voor het gebruik van WordPress achtergrondafbeeldingen

Blijf bij afbeeldingen van hoge kwaliteit

De resolutie van jouw beoogde achtergrondafbeelding maakt of breekt vaak de presentatie ervan. Misschien denk je dat een foto die je met jouw smartphone hebt genomen perfect is voor een achtergrondafbeelding, maar de kans is groot dat deze van veel hogere kwaliteit moet zijn.

Je kunt betalen voor een rechtenvrije afbeelding van een site als Shutterstock. Deze sites hebben meestal afbeeldingen van professioneel niveau die zijn geprepareerd en klaar staan als om te worden gebruikt als een grote achtergrondafbeelding. Je kunt er ook veel vinden op sites met gratis stockafbeeldingen.

De achtergrondafbeelding wordt mogelijk niet in zijn geheel weergegeven op jouw website, omdat een groot deel ervan wordt bedekt door inhoud. Toch wordt de eigenlijke afbeelding over het hele scherm weergegeven.

Als je geen afbeelding van hoge kwaliteit gebruikt, loop je het risico dat je een uitgerekte achtergrond te zien krijgt.

Zorg ervoor dat de achtergrondafbeeldingen de juiste afmetingen hebben

Naast de beeldresolutie is ook de fysieke grootte van de afbeelding van groot belang.

Alle schermen hebben verschillende beeldverhoudingen. En mobiele apparaten maken het nog ingewikkelder. Maar het doel is om een afbeelding te gebruiken die er goed uitziet voor de grootste schermen. Anders loop je het risico dat de afbeelding weer eens uitgerekt wordt of niet goed wordt weergegeven.

Over het algemeen is een goede regel om een minimale WordPress achtergrondafbeelding grootte van 1024 x 768 pixels aan te houden. Andere experts raden echter iets van 1920 x 1080 pixels aan. Over het algemeen kun je het beste ergens tussen de 1000 en 3000 pixels voor de breedte aanhouden, afhankelijk van waar de afbeelding wordt weergegeven.

De volgende factor die je moet overwegen is de beeldverhouding. Dekt de achtergrondafbeelding de hele website, of is het alleen het bovenste kwart?

Technisch gezien heeft een website een staande (langere hoogte dan breedte) beeldverhouding. Dus je kunt kijken naar dat soort afbeeldingen. Maar gedeeltelijke achtergronden, zoals die voor kopteksten of banneradvertenties, moeten in liggende opmaak blijven (langer in de breedte dan in de hoogte).

De meest voorkomende beeldverhouding voor desktops is tegenwoordig 16:9. Het helpt om rond dat doel te blijven. Een responsief thema of plugin kan de achtergrondafbeelding automatisch aanpassen voor gebruik op kleinere schermen.

Uiteindelijk zou het testen van jouw achtergrondafbeeldingen op een echte site en meerdere apparaattypes de uiteindelijke beslissing veel gemakkelijker moeten maken.

Optimaliseer voordat je een WordPress achtergrondafbeelding maakt

Zoals met alle afbeeldingen die je uploadt naar WordPress, bewijs je jezelf een slechte dienst als je ze niet optimaliseert voordat je ze op het internet publiceert. Dit is vooral belangrijk voor achtergrondafbeeldingen omdat deze vaak op meerdere pagina’s van jouw website voorkomen. Plus, het zijn grote foto’s en ze nemen een aanzienlijke hoeveelheid ruimte in op het scherm.

Grotere afbeeldingen belasten de server aanzienlijk. Handhaaf de resolutie van jouw afbeelding, maar optimaliseer de grootte zodat jouw website snel laadt voor mobiele weergave.

Je hebt twee opties om foto’s te optimaliseren:

1. Optimaliseer de achtergrondafbeeldingen (en alle website afbeeldingen) voordat je ze naar WordPress uploadt. Voltooi dit handmatige proces met behulp van tools zoals Photoshop Express, GIMP, en Pixlr.
2. Automatiseer het optimalisatieproces door een WordPress plugin te installeren die foto’s hervormt en verkleint bij het uploaden.

Lees onze uitgebreide handleiding over het optimaliseren van afbeeldingen voor betere webprestaties.

Controleer of achtergronden worden ondersteund voordat je een thema installeert

Helaas ondersteunen niet alle thema’s aangepaste achtergrondafbeeldingen. Dat komt vaak omdat de achtergrond niet in het algemene ontwerp van het thema past, dus heeft de ontwikkelaar ervoor gekozen deze helemaal uit te schakelen.

Maar als je echt een achtergrond op jouw website wilt, is het verstandig om de lijst met functies te controleren wanneer je een nieuw thema downloadt, vooral als je van plan bent te betalen voor een premium thema. Veel thema verkoopwebsites geven informatie over de vraag of een thema achtergronden ondersteunt of niet.

Thema’s die in de WordPress Theme Library worden vermeld, bieden bijvoorbeeld ondersteuning voor aangepaste achtergronden als tags. Je kunt ook een verwijzing naar een aangepaste achtergrond vinden in de beschrijving van het thema.

Andere themasites bevatten doorgaans soortgelijke informatie over aangepaste achtergrondafbeeldingen. Zo niet, neem dan contact op met de ontwikkelaar om na te gaan of dit op enigerlei wijze mogelijk is en of het overschrijven van het blok met achtergrondafbeeldingen (zie hieronder) problemen met het thema zal veroorzaken.

Overweeg het gebruik van een visuele paginabouwer om achtergrondafbeeldingen eenvoudiger te maken

Pagina bouwers zoals Gutenberg, WPBakery, Divi, en Elementor, bieden indrukwekkende lijsten van blokken en modules om elementen zoals afbeeldingen en tekstvakken overal op een webpagina in te voegen.

Zonder een drag-and-drop bouwer, wordt het een beetje moeilijker om een achtergrondafbeelding te configureren. Het is vooral lastig om eventuele problemen die je tegenkomt op te lossen.

Paginabouwers hebben ook de neiging om de standaard achtergrondafbeelding functionaliteit te vervangen die door WordPress wordt geleverd. Je kunt themabeperkingen of ontbrekende elementen die helpen bij het weergeven van een achtergrondafbeelding in de code opheffen.

Zorg ervoor dat jouw achtergrondafbeelding legaal is

Legaliteit komt altijd ter sprake als we het over afbeeldingen hebben, vooral als ze op het internet worden gepubliceerd. Er is een groeiende trend op sociale media waarbij mensen lijken aan te nemen dat het toevoegen van een naamsvermelding aan een foto het automatisch in orde maakt om die foto te gebruiken.

Dat is niet waar.

Degene die de foto maakt, is de eigenaar. Zelfs als die foto afkomstig is van een snel iPhone kiekje, is die foto onmiddellijk auteursrechtelijk beschermd in de Verenigde Staten en veel andere landen.

Als je de wettelijke rechten wilt om de foto van iemand anders te gebruiken, heb je een schriftelijke verklaring nodig van de houder van het auteursrecht die jou toestaat hun foto’s te gebruiken – een eenvoudige e-mail is voldoende. Zelfs dan kan het zijn dat je de foto moet vermelden als de persoon jou daarom vraagt.

Wij hebben een uitgebreide gids over het beschermen van afbeeldingen op jouw site, maar het artikel bevat ook waardevolle informatie voor degenen die foto’s van andere bronnen willen gebruiken.

Het lastige aan achtergrondafbeeldingen is dat het meestal niet praktisch is om de naamsvermelding toe te voegen, aangezien WordPress geen plaats heeft om een zichtbaar bijschrift voor achtergrondafbeeldingen op te nemen. En nee, je kunt geen bronvermelding toevoegen aan een willekeurige blog post of pagina en verwachten dat deze als credits dienen voor een volledige website achtergrondafbeelding.

Om jezelf te beschermen en om degenen die de foto’s nemen te respecteren, overweeg dan een van de volgende bij het zoeken naar een WordPress achtergrondafbeelding:

• Maak de foto zelf. Dat is de eenvoudigste manier om er zeker van te zijn dat je geen inbreuk maakt op het auteursrecht van iemand anders.
• Betaal voor foto’s op websites als Shutterstock en iStockPhoto. Deze zijn soms duur, maar voor één achtergrondafbeelding kan het net binnen je budget passen.
• Overweeg een website met gratis afbeeldingen zoals Unsplash of Pexels. Let er echter wel op dat naamsvermelding niet verplicht is! Je kunt op deze sites soms afbeeldingen vinden waarbij naamsvermelding wordt gesuggereerd, maar niet vereist is.
• Neem contact op met de fotograaf of kunstenaar en vraag of je de foto gratis mag gebruiken. Je zal verbazen hoe vaak dit werkt, vooral als je iets in ruil aanbiedt.
• Overweeg om de achtergrondafbeelding over te slaan, of om een gekleurde achtergrond te kiezen in plaats van een foto.

Hoe stel ik een achtergrondafbeelding in WordPress in?

Er zijn verschillende manieren om een achtergrondafbeelding in WordPress in te stellen. Deze methoden veranderen meestal op basis van de plaats waar je de afbeelding wilt plaatsen.

Je kunt bijvoorbeeld besluiten dat je een achtergrondafbeelding wilt hebben die op jouw hele website hetzelfde blijft. Het is natuurlijk ook mogelijk dat je liever een manier vindt om unieke achtergrondafbeeldingen voor al jouw pagina’s te tonen.

Omdat er zoveel mogelijkheden zijn, zullen we vertellen hoe je een achtergrondafbeelding of -kleur kunt toevoegen aan de volgende secties:

• De hele site
• Een WordPress pagina
• Een WordPress bericht
• Een individueel inhoudsblok
• De WordPress header
• Een archiefpagina voor categorieën
• De WordPress loginpagina
• Het navigatiemenu
• Een onderhoudspagina

Voordat je begint: Activeer de ondersteuning voor aangepaste achtergronden in WordPress (indien nodig)

Thema-ontwikkelaars beslissen over het lot van de achtergrondmogelijkheden van een site. WordPress heeft de functionaliteit in de core ingebouwd, maar een thema-ontwikkelaar kan het uitschakelen, waardoor je geen dashboardinstelling meer hebt om het in te schakelen.

Als je op enig moment in de volgende tutorials ontdekt dat jouw thema de reden is waarom je geen optie voor een aangepaste achtergrond hebt, overweeg dan de volgende stappen om dit snel te verhelpen.

De belangrijkste plek waar de ondersteuning van een aangepaste achtergrond wordt bepaald is functions.php bestand. Open dat bestand en voeg de volgende code in als die ontbreekt:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Houd in gedachten dat het element dat daadwerkelijk de achtergrondsondersteuning activeert, de add_theme_support() functie is met alles erin. Die code zet de achtergrondfunctie aan in het WordPress dashboard, die je kunt gebruiken binnen veel van de volgende tutorials in dit artikel.

Het is ook mogelijk om een standaard achtergrondafbeelding voor het hele thema toe te voegen via het functions.php bestand. Ga gewoon naar het gebied van de vorige code met de default-image waarde en voeg de URL van de afbeelding toe aan de lege ruimte tussen de ' ' na de =>.

Dit is een snelle en eenvoudige manier om aangepaste achtergronden in te schakelen binnen het WordPress dashboard.

Dat gezegd hebbende, raden wij aan om van thema te veranderen als het geen achtergrondondersteuning heeft. Het verwijderen van de aangepaste achtergrondfunctie is namelijk niet voor niets gedaan, misschien vond de thema-ontwikkelaar dat het te veel problemen veroorzaakte met het ontwerp.

Hoe een achtergrondafbeelding aan jouw hele WordPress site toevoegen

Als jouw thema de mogelijkheid biedt om een aangepaste achtergrondafbeelding toe te voegen (en veel thema’s bieden die mogelijkheid), maakt dat het voor jou een stuk eenvoudiger.

Om te beginnen, ga naar jouw WordPress dashboard en klik op Appearance > Customize.

Dat brengt je naar de WordPress Theme Customizer, met aanpassingsinstellingen aan de linkerkant en een website preview aan de rechterkant.

Hier zoek en klik je op het Background tabblad.

Als alternatief kun je Appearance > Background kiezen voor een meer directe route naar deze instelling.

Het gebied voor het aanpassen van de achtergrond beheert de achtergrondelementen voor jouw hele website.

Klik op de knop Select Image om verder te gaan.

Kies in het venster Select Image een afbeelding die goed past als achtergrond voor jouw merk en de styling van de website. In het algemeen helpt een neutraal kleurenpatroon met een zwarte, witte, of grijze tint om ervoor te zorgen dat het grootste gedeelte van jouw tekst en inhoud er nog steeds goed uitzien met de achtergrond erachter.

Zodra je jouw afbeelding hebt geselecteerd, klik je op de knop Choose Image om verder te gaan.

De achtergrond die je hebt geïmplementeerd verschijnt nu in de preview van de website.

Kijk of je inhoud nog steeds opvalt en er toonbaar uitziet met de gekozen afbeelding. Soms kan het nodig zijn om de achtergrond volledig te vervangen of dingen te veranderen zoals tekst of linkkleuren.

Een kleine thumbnail van de achtergrond wordt ook weergegeven in het Settings paneel, om te laten zien dat de afbeelding is geïmplementeerd.

Een paar extra instellingen zijn beschikbaar voor WordPress achtergronden, waaronder het Preset veld.

Klik op het Preset veld om de opmaak van de afbeelding te wijzigen met behulp van vooringestelde ontwerpen en uitlijningen.

Je kunt kiezen uit de volgende voorinstellingen:

• Standaard: Dit is meestal hetzelfde als Herhalend, maar kan afhankelijk zijn van jouw thema. De standaard (default) instelling werkt over het algemeen het beste, maar het hangt af van de afbeelding die wordt gebruikt.
• Schermvullend: Deze instelling rekt de afbeelding uit om ervoor te zorgen dat alle delen van het scherm bedekt worden, zelfs als dat betekent dat het beeld moet worden bijgesneden zodat het over het scherm uitvloeit. Dit werkt goed voor afbeeldingen met een hoge resolutie, maar kan wazigheid veroorzaken bij afbeeldingen met een lage resolutie.
• Aanpassen aan scherm: Dit behoudt de beeldverhouding van de originele foto en probeert die verhouding te gebruiken om in het huidige schermbeeld te passen. De afbeelding blijft zo dicht mogelijk bij het origineel, maar het is mogelijk dat niet de hele achtergrond wordt bedekt.
• Herhalend: Dit gebruikt delen van de functie Schermvullend, waarbij de afbeelding wordt uitgebreid en uitgerekt, maar het herhaalt ook de afbeelding als het niet lukt om het hele scherm te bedekken. Voor patronen ziet dit er meestal goed uit. Maar voor sommige afbeeldingen kan dit een harde lijn opleveren tussen de herhaalde afbeeldingen.
• Aangepast: Deze instelling geeft je de meeste controle over de achtergrond en biedt verschillende opties om de grootte van de WordPress achtergrondafbeelding aan te passen, zoals hoe deze zich herhaalt op de pagina, uitrekt, of beweegt als de gebruiker scrolt.

Er is geen regel voor welke van de Presets het beste werkt, omdat afbeeldingen in verschillende afmetingen, resoluties en details bestaan. Daarom kun je het beste beginnen met Default en dan de andere presets testen om te zien welke het beste werkt voor jouw achtergrondafbeelding.

Als al het andere mislukt, ga dan naar de instelling Custom om echt specifiek te worden met jouw keuzes.

De voorinstelling Schermvullend voldoet niet helemaal voor deze afbeelding, vooral omdat de originele afbeelding veel langer is dan hij breed is, waardoor er aan de rechterkant een aanzienlijke hoeveelheid ruimte overblijft. Ik zou de afbeeldingspositie (Image Position) naar het midden kunnen wijzigen, maar dan zou er waarschijnlijk witruimte aan de zijkanten overblijven.

De volgende instelling om te overwegen is de Image Position tool. Klik op de pijlen om de achtergrondafbeelding te verplaatsen, de oriëntatie aan te passen om de focus van de afbeelding naar het midden te plaatsen of om het scherm te vullen.

Net als bij de instelling van de andere presets, moet je bij de Image Position tool enigszins gissen en jouw werk previewen, aangezien de originele afbeelding en de inhoud ervan bepalen hoe het eruit ziet.

Vervolgens is er een selectievakje om de achtergrondafbeelding mee te laten scrollen met de pagina, die Scroll with Page heet.

Met dit vakje aangevinkt, blijft de achtergrondafbeelding plakken aan de content die je op de voorgrond vindt en scrolt hij mee met de gebruiker als die persoon omhoog of omlaag beweegt op de pagina.

Het uitvinken van dit vakje verandert vaak ook de algemene placering van de achtergrondafbeelding, maar de belangrijkste eigenschap is om de achtergrond statisch te laten blijven staan, terwijl de gebruiker naar beneden scrolt op de pagina.

De content op de voorgrond (zoals de producten in dit geval) glijdt in dat geval over de achtergrondafbeelding, wat een aantrekkelijk effect geeft.

Werken met een aangepaste preset

Wanneer je kiest voor iets anders dan de Custom preset, krijg je niet zo veel extra instellingen om te configureren.

Als je echter de custom preset kiest, krijg je verschillende andere velden waar je wat mee kan doen.

Je kunt bijvoorbeeld kiezen voor Schermvullend of Aanpassen aan scherm, en dat combineren met een herhaalde of niet-herhaalde achtergrondafbeelding, waarbij je de elementen van de preset van voorheen combineert. En je krijgt nog steeds de Scroll met Pagina optie.

Kijk of het mogelijk is om de originele foto te gebruiken zonder bewerkingen of instellingen. Soms is de originele foto een bijna perfecte match om als achtergrond te gebruiken, dus waarom knoeien met iets wat al klaar is om te gebruiken?

Maar het kan ook zijn dat de foto te groot is voor je website, of dat de beeldverhouding niet helemaal goed is. Hoe dan ook, we raden je aan om met deze instelling te experimenteren om uit te vinden of hij geschikt is voor jou.

Zodra je jouw perfecte achtergrondinstellingen hebt gekozen (voor deze handleiding ziet de Default optie er goed uit), klik je op de knop Publish om de wijzigingen op jouw website te renderen.

Ga naar de voorkant van je website om de achtergrond in actie te zien.

De homepage is een prachtige plek om te beginnen. Je zult zien dat de header en de welkomstafbeelding geen achtergrond hebben. Dat komt omdat de welkomstafbeelding bovenaan de site al het hele horizontale deel van het scherm opneemt als een schermvullende hero-afbeelding.

Wat betreft de header en het menu: je zult leren hoe je die achtergronden kunt configureren in een aantal van de volgende tutorials.

Houd in gedachten dat de algemene aangepaste WordPress achtergrond wordt geactiveerd op elke pagina en post van uw website. Het is een algemene functie voor degenen die een snelle manier willen om hun site een eigen gezicht te geven en wat op te laten vallen.

Bijvoorbeeld, als je naar de Shop pagina op deze site gaat, zie je de achtergrond achter de product selectie.

Hoe een achtergrondkleur instellen in plaats van een afbeelding voor je hele website

Het proces van het activeren van een achtergrondkleur op de gehele website is niet veel anders dan wanneer je een achtergrondafbeelding inschakelt. Ga eerst naar Appearance > Background in het dashboard en zoek dan naar het veld Background Color.

Klik op de knop Select Color om meer instellingen te openen om verschillende kleuren voor je achtergrond te kiezen en uit te wisselen.

Het kleurenpaneel biedt meerdere opties om een kleur te kiezen. De eerste is door een kleurcode in te typen, of te plakken. Alle kleuren hebben unieke kleurcodes, en je kunt deze kleuren en hun bijbehorende codes met een snelle internet zoekopdracht vinden.

De andere optie is om in het kleurenpaneel rond te klikken om de perfecte kleur voor de achtergrond te vinden. Er zijn zelfs gewone kleurstalen onderaan het paneel als je liever een van de eenvoudigere kleuren neemt.

Om een achtergrondkleur te activeren, moet je ervoor zorgen dat de kleur is geselecteerd en wordt weergegeven in de Select Color preview.

Je zou de kleur achtergrond in de WordPress Customizer voorbeeldweergave moeten zien. Als dit niet het geval is, betekent dit waarschijnlijk dat je een achtergrondafbeelding hebt geïnstalleerd die de gekleurde achtergrond overschrijft.

Het enige wat je hoeft te doen om de gekleurde achtergrond te onthullen is klikken op de knop Remove onder de Background Image preview.

Nu verschijnt de kleur over de gehele site, achter de inhoud. Net als bij een achtergrondafbeelding, is het verstandig om jouw website te bekijken om er zeker van te zijn dat alle tekst, afbeeldingen en links nog steeds zichtbaar zijn met de nieuwe achtergrond.

Hoe een achtergrondafbeelding aan een WordPress pagina toevoegen

Maar wat als je een afbeelding in WordPress wilt invoegen om als achtergrond op een enkele WordPress pagina te laten weergeven? In het vorige gedeelte zijn de globale instellingen voor een achtergrondafbeelding voor de hele site beschreven.

Bekijk onze videogids voor het toevoegen van achtergrondafbeeldingen aan afzonderlijke WordPress pagina’s, berichten en contentblokken

Veel mensen vinden het leuk om achtergronden aan hun pagina’s toe te voegen, omdat je een bepaald thema of gevoel aan een pagina kunt geven dat van toepassing is op de inhoud. Een Over Ons pagina kan bijvoorbeeld een achtergrond in Los Angeles hebben als het bedrijf in LA is gevestigd. Of een inleiding tot een boek van een auteur kan een achtergrond hebben die past bij het thema van het verhaal.

In dit gedeelte bespreken we hoe je een WordPress achtergrondafbeelding aan een pagina kunt toevoegen met behulp van één primaire methode en een paar alternatieven als je het niet erg vindt om geld uit te geven aan een plugin of te kiezen voor een paginabouwer.

Opmerking: Het maakt niet uit of je de Gutenberg of Classic WordPress Editor gebruikt.

Voor pagina-specifieke achtergronden lijken deze methoden het beste te werken:

• Het toevoegen van een unieke pagina achtergrond met aangepaste CSS.
• Een plugin gebruiken die individuele pagina achtergronden mogelijk maakt.
• Het opnemen van een aangepaste achtergrond op elke pagina met behulp van een paginabouwer.

Het toevoegen van jouw eigen aangepaste CSS aan een pagina vereist het vinden van de class ID voor die pagina en het oproepen van een achtergrond URL, binnen de Custom CSS module, in de WordPress pagina-instellingen. Gelukkig is het niet zo moeilijk om de class ID van een pagina te achterhalen, aangezien we die kunnen opzoeken, of misschien weet je al wat het is.

Ga naar de pagina op jouw site waar je een achtergrond wilt voor alleen die pagina.

Klik met de rechtermuisknop ergens op de pagina om een keuzemenu op het scherm te openen. Selecteer de Inspect tool onderaan het dropdown menu.

De Inspect module toont codering van de pagina zelf, samen met aangepaste CSS die globaal voor jouw website wordt gebruikt. Het is een handig gedeelte om informatie over een pagina of post op jouw site op te zoeken.

Het Inspect vak bevat coderegels van de pagina, maar we zijn alleen geïnteresseerd in de class-tag die aan deze pagina in het bijzonder is toegewezen. Ter verduidelijking, elke WordPress pagina heeft een class tag als identificatiecode.

Gebruik de zoekfunctie en typ in body of class om de regel code met de page-id tag te vinden.

In dit geval is de ID page-id-352, maar die van jou zal verschillen.

Je wilt het gehele deel van de code met het page-id-# sleutelwoord kopiëren, inclusief de streepjes.

Met de page id ergens opgeslagen voor gebruik in de volgende stappen, ga je terug naar jouw WordPress dashboard en klik je op Appearance > Customize.

Selecteer het tabblad Additional CSS in de WordPress Customizer.

In deze sectie kunt je alle aangepaste CSS typen of plakken die je wilt om items op jouw website te manipuleren. In dit geval is het handig om de standaard achtergrondafbeelding te overschrijven en een achtergrondafbeelding in te schakelen voor één pagina en niet voor de andere pagina’s.

Plak de volgende code in het Additional CSS veld, maar vergeet niet om de “#” te vervangen door het werkelijke nummer dat je als page ID uit de vorige stappen hebt gehaald. Ook moet je een echte afbeeldings URL plaatsen in plaats van de tekst die we daar hebben (http://YOURIMAGEURL.jpeg).

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

In dit voorbeeld is de page ID ingevuld als 352, en hebben we een URL voor de achtergrondafbeelding geplakt uit onze Mediabibliotheek.

Indien nodig kun je de aangepaste achtergrondinstellingen wijzigen als je problemen hebt met de achtergrondafbeelding van het scherm. Je kunt bijvoorbeeld elementen zoals de grootte, bijlage of positie van de WordPress achtergrondafbeelding wijzigen. Zo niet, laat ze dan allemaal zoals ze in de voorbeeldcode staan.

Klik op de Publish knop wanneer je tevreden bent met de aangepaste CSS.

Met die aangepaste CSS bevat de opgegeven pagina een achtergrondafbeelding met behulp van de instellingen van de code. Geen enkele andere pagina op jouw site zal dezelfde achtergrond tonen, tenzij je de CSS herhaalt voor verschillende pagina ID’s.

Zoals eerder vermeld, zijn er nog andere opties om een unieke achtergrond aan een WordPress pagina toe te voegen zoals het gebruik van een paginabuilder of een plugin die achtergrondafbeeldingen op individuele pagina’s mogelijk maakt.

Echter, de goedkoopste en snelste manier om een achtergrondafbeelding op een individuele pagina te plaatsen is door gebruik te maken van de CSS code methode zoals hierboven getoond.

Hoe voeg je een achtergrondafbeelding toe aan een WordPress bericht

De meeste achtergrondafbeeldingen worden ingevoegd achter WordPress pagina’s of elke pagina in een website.

De standaard aangepaste achtergrondfunctie in WordPress heeft niets te maken met individuele berichten, afgezien van het feit dat deze achtergrond ook voor de blogberichten zal worden weergegeven. Dat is niet ideaal voor alle organisaties, omdat verschillende blogposts drastisch verschillende onderwerpen kunnen hebben.

Dergelijke blogs kunnen baat hebben bij hun eigen unieke achtergrondafbeeldingen. WordPress berichten hebben echter geen eigen achtergrondafbeelding, wat het een beetje lastiger maakt.

Daarom hebben we een paar opties om te overwegen bij het toevoegen van een achtergrondafbeelding aan een bericht (je zult merken dat ze hetzelfde zijn als bij het werken met paginaspecifieke achtergrondafbeeldingen):

• Voeg een achtergrondafbeelding in met behulp van aangepaste CSS.
• Gebruik een plugin om een achtergrond te implementeren op individuele berichten.
• Installeer een visuele paginabouwer voor achtergronden bij berichten.

Net als in de vorige sectie over unieke pagina-achtergronden, kun je een bericht-specifieke achtergrond toevoegen met behulp van een paginabouwer of een plugin.

Aangezien het maken van een bericht-specifieke achtergrond niet veel verschilt van een pagina-specifieke achtergrond, zullen we alleen kort ingaan op de stappen om dit proces voor een individueel bericht uit te voeren.

Wanneer je aangepaste CSS gebruikt om een bericht-specifieke achtergrond te implementeren, gebruik je dezelfde code als voor de pagina-achtergrond, met één verschil: je moet de bericht ID vinden in plaats van de pagina ID.

Klik met de rechtermuisknop op het bericht en kies de optie Inspect. Zoek in de code naar de body class sectie in de code. Zoek naar het postid-# gedeelte – dat is de bericht ID die je moet invoegen in de aangepaste CSS.

 

Je zult merken dat de opmaak voor de post ID in dit voorbeeld iets anders is dan voor de pagina ID, waar de postid-# tag geen streepje heeft tussen “post” en “id” zoals bij page-id-#. Dit zijn ook geen strenge regels. Je kunt verschillende formaten voor de tags vinden.

Ga nu naar je WordPress dashboard en klik op Appearance > Customize. Navigeer naar het tabblad Additional CSS.

Plak de volgende code in dat aangepaste CSS veld:

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Neem daarna het nummer van de bericht ID dat je eerder hebt gevonden van het gewenste bericht. Vervang de “#” in de CSS code door het nummer. Verander ook de http://YOURIMAGEURL.jpeg tekst met de echte URL van de achtergrondafbeelding die je wilt laten zien, en laat de aanhalingstekens er omheen staan.

Zorg ervoor dat je op de Publish knop drukt voordat je de Additional CSS tab verlaat, omdat dit je wijzigingen opslaat op de website en je in staat stelt om de achtergrond op de front-end te bekijken.

Met deze CSS wijzigingen op zijn plaats, kun je nu terug gaan naar de front-end van die WordPress blog post om de nieuwe achtergrond te zien. Test de andere blogberichten en pagina’s op jouw site om ervoor te zorgen dat geen van de andere een achtergrond heeft, tenzij je dezelfde code implementeert voor die bericht ID’s.

Hoe voeg je een achtergrondafbeelding toe aan een individueel inhoudsblok

De individuele inhoudsblokken van de WordPress Gutenberg blok-editor zorgen voor een breed scala aan opties voor het weergeven van inhoud, waaronder tekstvakken, afbeeldingen en galerijen.

Deze breken de inhoud op in afzonderlijke secties. Zo kun je een achtergrondkleur of afbeelding alleen voor dat blok toevoegen.

Stel dat je bijvoorbeeld een blogbericht schrijft over de status van de kledingindustrie. Je wilt de post eindigen of beginnen met een call-to-action voor mensen om zich in te schrijven voor jouw volgende webinar. Het zou logisch zijn om deze sectie te laten opvallen door een achtergrondkleur of afbeelding te gebruiken.

Helaas biedt de WordPress blok-editor geen allesomvattende instelling waar je een achtergrond kunt toevoegen aan elk blok. Echter, sommige blokken hebben de mogelijkheid om een gekleurde achtergrond te gebruiken.

Er is ook een blok, genaamd een Cover blok, dat het dichtst in de buurt komt van wat wij willen:  een achtergrondafbeelding voor een blok toevoegen in een bericht of pagina. De cover maakt het mogelijk om tekst en sommige media-items te overlappen, waardoor het geschikt is voor ons einddoel.

Hieronder staan de technieken die je kunt gebruiken voor het instellen van een afbeelding of kleuren achtergrond voor een individueel WordPress blok.

Een gekleurde achtergrond instellen voor één blok

De eenvoudigste manier om een enkel blok wat levendigheid te geven is door een gekleurde achtergrond toe te voegen. Het is niet zo mooi als een afbeeldingsachtergrond, maar de kleurenachtergrond is eigenlijk het enige type achtergrond in de WordPress blok editor dat beschikbaar is voor de standaard blokken.

Opmerking: Sommige blokken hebben helemaal geen achtergrondinstellingen. Als dat het geval is, kun je het beste een Cover blok gebruiken en daar andere blokken overheen leggen, zoals verderop in dit artikel wordt behandeld.

Het Paragraph blok, bijvoorbeeld, heeft een instelling om een gekleurde achtergrond te activeren.

Om dit aan te zetten, selecteer je het blok en zoek je de Color Settings onder het tabblad Block aan de rechterkant.

Dit gedeelte onthult de velden Tekst Color en Background Color.

Ga naar het gebied Background Color en selecteer een kleur uit de lijst met beschikbare opties. Je kunt ook de link Custom Color kiezen om jouw eigen kleurcode in te voegen of een unieke kleur te kiezen.

Zoals je kunt zien, verandert de achtergrond van het Paragraph blok in een andere kleur – in dit geval blauw.

Een gekleurde achtergrond toevoegen aan elk WordPress blok

Zoals eerder vermeld, hebben niet alle WordPress blokken deze ingebouwde achtergrondfunctie. Wat moet je doen als je een galerij wilt maken, of een ander blokelement, dat niet de achtergrondoptie biedt?

De snelste oplossing is om gebruik te maken van de Group blokfunctie in WordPress.

Om dit te doen, selecteer je meerdere blokken die al in je inhoud staan. Voor dit voorbeeld zal ik zowel een Paragraph blok als een Gallery blok tegelijk selecteren.

Klik op het gestapelde vierkante pictogram in het menu dat verschijnt.

Kies de optie Group in het uitklapmenu.

Dit neemt alle blokken die je op dat moment hebt geselecteerd en combineert ze tot een groep, zodat je ze allemaal samen kunt verplaatsen of bewerken in plaats van afzonderlijke blokken.

Dit stelt de groep als een eigen blok. Dit betekent dat je naar het tabblad Block Settings aan de rechterkant van de pagina kunt gaan om de instellingen te vinden.

Zoek naar het tabblad Color Settings en klik daarop.

Net als een standaard Paragraph blok, heeft het Groepsblok ook een Background Color functie.

Kies de kleur die je het mooist vindt voor deze situatie. Als het goed is zie je nu dat alles binnen die groep nu die kleurachtergrond zou moeten hebben.

Het mooie van dit Group blok is dat het een ander blok, dat geen achtergrondfunctie heeft (zoals het Gallery blok), toch een achtergrond kan geven.

Een achtergrond van een afbeelding toevoegen aan een WordPress blok

WordPress blokken staan zowel in pagina’s als in berichten. Daarom kunnen we deze tactiek voor beide gebruiken. Je kunt vrijwel elke inhoud boven de achtergrond van het gegroepeerde blok invoegen – of alleen in één WordPress blok.

Om met dit proces te beginnen, klik je op de knop Add Block of op het pictogram “+” en zoek je naar het Cover blok.

Kies dat blok om het in jouw bericht of pagina in te voegen.

Klik vervolgens op de knop Upload of Select Media, waarmee je kunt zoeken naar afbeeldingen die je als achtergrond kunt gebruiken.

Kies de afbeelding die je wilt en klik op de knop Select.

Nu zie je die afbeelding als achtergrond voor het Cover blok.

Voel je vrij om op dat blok te klikken om te beginnen met het typen van content, aangezien het overlappen van tekst de belangrijkste reden is dat mensen deze gebruiken.

Wat geweldig is aan het Cover blok is dat het verschillende opmaak opties biedt, waardoor je in een paar seconden van header- naar paragraafopmaak kunt springen.

Om andere blokken boven op die achtergrond toe te voegen, klik je op het “+” pictogram in het Cover blok zelf. Het kan zijn dat je een keer op de Enter toets moet drukken om de knop zichtbaar te maken.

Net als bij het toevoegen van een inhoudsblok in een gewoon artikel, kun je met het Cover blok door alle mogelijke inhoudsblokken in WordPress bladeren.

Dat betekent dat je een Image, Gallery, Column, of elk type WordPress blok binnen het Cover blok kunt plaatsen, waardoor het de ideale oplossing is voor afbeeldingsachtergronden met een individueel blok.

Voor dit voorbeeld heb ik een afbeelding ingevoegd en het een beetje opgemaakt zodat het er acceptabel uitziet binnen het Cover blok.

Elk blok dat je voor de achtergrond plaatst heeft zijn eigen aangepaste instellingen in het rechter Block tabblad, dus overweeg ze te bewerken terwijl je ze in het Cover blok zet.

Op een gegeven moment wil je misschien de achtergrondafbeelding zelf bewerken of aanpassen. Als dat het geval is, kies je Cover blok en ga je naar het tabblad Block Settings aan de rechterkant van de pagina.

Dit onthult een groot aantal instellingen die je kunt aanpassen voor de achtergrondafbeelding, waaronder de volgende:

• Vaste achtergrond
• Herhaalde achtergrond
• Brandpuntkiezer
• Afmetingen
• Overlay
• Doorzichtigheid
• Geavanceerd

Een van de belangrijkste instellingen bevindt zich onderaan in het paneel met Block Settings.

Scrol naar beneden om de sectie Overlay te vinden. Open de sectie om een lijst van kleur-overlays te onthullen en opties om die kleuren effen of gradiënten te maken.

Dit is een goede optie om de achtergrondkleur enigszins aan te passen aan jouw merk of om de inhoud op de voorgrond te benadrukken. Je kunt ook de Ondoorzichtigheid aanpassen om ervoor te zorgen dat de kleur-overlay de achtergrond niet helemaal overweldigt.

Als alternatief, overweeg de Stackable Page Builder Gutenberg Blocks plugin om meer geavanceerde tools te openen voor achtergronden op individuele blokken.

Hoe een achtergrondafbeelding achter de WordPress header plaatsen

Tot nu toe hebben we het gehad over hoe je een achtergrondafbeelding aan jouw gehele WordPress site kunt toevoegen, samen met methoden voor achtergronden op specifieke gebieden zoals WordPress blokken, berichten en pagina’s. Maar hoe zit het met het gebied dat jouw menu en logo bevat?

Soms is een achtergrond achter de header alles wat je nodig hebt.

Het instellen van een achtergrondafbeelding voor de header voegt een nieuwe vibe aan je site toe, vooral als er een vakantie aan de gang is of een grote uitverkoop die je kunt highlighten.

Om te beginnen, ga naar Appearance > Header in het WordPress dashboard.

Opmerking: Je kunt de header instellingen ook vinden door naar Appearance > Customize > Header te gaan.

Je zou nu een voorbeeld van jouw homepage aan de rechterkant van het scherm moeten zien, samen met de Header instellingen aan de linkerkant daarvan.

De Header module legt de voorkeursafmetingen uit voor een header achtergrondafbeelding, dus je kunt ervoor kiezen om jouw afbeelding bij te snijden voordat je deze uploadt, of te wachten totdat je de afbeelding op jouw WordPress dashboard krijgt.

Klik onder de titel Current header op de knop Add New Image.

Headers zijn lastig omdat je ervoor wilt zorgen dat alle links en tekstelementen (en niet te vergeten jouw logo) er kristalhelder uitzien bovenop de achtergrondafbeelding.

Daarom raden we je aan om achtergrondafbeeldingen uit te proberen en afbeeldingen te overwegen die het bij effen kleuren en patronen houden. Deze maken het niet zo moeilijk om jouw menu-items en logo te zien.

Selecteer een afbeelding die voor jou ideaal lijkt en klik vervolgens op de knop Select and Crop om verder te gaan.

Wij houden van het ingebouwde bijsnijdgereedschap omdat het automatisch de juiste afmetingen voor de achtergrondafbeelding van de koptekst geeft. Dit zou het proces moeten versnellen in vergelijking met het vooraf bewerken van een foto in iets als Photoshop.

Verplaats het uitsnijdvak naar de locatie die het meest logisch is voor jouw achtergrondafbeelding. Versleep gerust een van de hoeken als je de afbeelding nog verder wilt verkleinen.

Als je de perfecte uitsnede hebt, klik je op de knop Crop Image.

De header achtergrondafbeelding wordt onmiddellijk geactiveerd in de WordPress Customizer preview, zodat je precies kunt zien waar jouw klanten naar zullen kijken met dit type achtergrond.

Je zult zien dat de achtergrondafbeelding van de koptekst niet overloopt in de rest van de pagina-inhoud. In plaats daarvan blijft ze in de header, achter alles wat zich daar momenteel bevindt, zoals een logo, slogan, menu en zoekbalk.

Een andere optie voor je headerachtergrond is om meerdere afbeeldingen te uploaden en ze willekeurig te laten roteren, zodat jouw website een beetje opfleurt en verrast wanneer een gebruiker op de homepage landt.

Om dit te laten werken moet je eerst verschillende afbeeldingen uploaden naar de instellingenbox van de header. Klik op de knop Add New Image om dat proces te voltooien.

Zodra je meer dan één afbeelding hebt, klik je op de knop Randomize Uploaded Headers om de functie te activeren die elke keer een andere achtergrond voor de header toont.

Je zult misschien merken dat het toevoegen van een achtergrondafbeelding aan de header het moeilijk maakt om sommige header-items te zien, zoals het menu of een winkelwagen.

Als dat het geval is, raden wij je aan de headerafbeelding niet meteen te verwijderen. Ga in plaats daarvan naar de velden Text Color en Link Color om te zien of aanpassingen kunnen helpen.

De instelling Text Color bepaalt alle tekst in de header die geen hyperlink heeft naar een andere interne of externe pagina. Vaak is dat alleen de tagline, als je die hebt, maar soms heb je andere items zoals een winkelwagen totaal of socialmedia pictogrammen die ook van kleur veranderen met de tekst.

Het andere vak is voor de linkkleur. Je zult waarschijnlijk meer veranderingen zien wanneer je deze kleur aanpast, omdat het alle menu-items omvat die gelinkt zijn aan andere pagina’s.

Hier is een voorbeeld van wat er gebeurt als je een nieuwe kleur kiest voor zowel de Text Color als de Link Color. Je kunt zien dat de tagline en de site naam zijn veranderd, het menu is veranderd in wit, en zo ook de meeste andere headerelementen zoals het winkelwagen-icoontje.

Voor degenen die geen achtergrondafbeelding willen gebruiken voor de header, is er ook de mogelijkheid om een effen achtergrondkleur te gebruiken.

Zoek hiervoor het veld Background Color in hetzelfde gebied als de koptekstinstellingen.

Klik op de knop Select Color en maak een keuze uit het kleurenpaneel om de voorbeeldresultaten te bekijken. Je kunt ook de tekstkleuren wijzigen wanneer je een achtergrondkleur gebruikt.

Nadat je hebt getest wat het beste werkt voor jouw header, en de perfecte achtergrondafbeelding voor die header hebt gekozen, klik je op de knop Publish zodat iedereen de veranderingen kan zien.

En als je problemen hebt met het zien van de wijzigingen aan de front-end, overweeg dan de WordPress cache te legen.

Zo voeg je achtergrondafbeeldingen toe aan WordPress categorieën en inlogpagina’s

Hoe een achtergrondafbeelding aan een WordPress categorie toevoegen

Een WordPress categorie archiefpagina verzamelt alle berichten die onder een bepaalde categorie vallen. Bijvoorbeeld, veel websites hebben categorieën voor aangepaste berichttypes zoals producten. Standaard hebben alle WordPress websites categorieën voor berichten. De berichten die je niet categoriseert worden gelabeld met de categorie Uncategorized.

Aangezien categorie archiefpagina’s soortgelijke inhoud verzamelen, is het zinvol om een relevante achtergrondafbeelding op die pagina’s op te nemen om de categorie beter te laten uitkomen. Je kunt bijvoorbeeld een technisch georiënteerde achtergrond gebruiken voor de categorie Webdesign of een achtergrond met schelpen- of strandpatronen voor de categorie Reizen.

De aangepaste CSS methode (hieronder beschreven) is de goedkoopste optie. Je kunt echter ook kijken naar de verschillende paginabouwers en plugins om te zien welke daarvan achtergronden op categoriepagina’s toestaan.

Om deze taak met CSS uit te voeren, open je jouw WordPress dashboard en ga je naar Appearance > Customize.

Selecteer het tabblad Additional CSS om de module te openen die het mogelijk maakt jouw eigen CSS in te typen.

Open een van jouw categorie archiefpagina’s op jouw WordPress site. Meestal hebben deze pagina’s URL’s zoals deze: http://yourwebsitedomain.com/category/travel. Je moet het ravel gedeelte veranderen in welke categorie je ook hebt op jouw eigen site en het yourwebsitedomain gedeelte veranderen in jouw eigen domeinnaam.

Klik met de rechtermuisknop ergens op de categoriepagina en klik op Inspecteren. De Inspect tool wordt getoond in je browser, met de code voor die pagina om te bekijken.

Zoek naar “body” of “class” om de CSS class te vinden voor categoriepagina’s, samen met de class voor deze categorie in het bijzonder.

In dit geval is onze CSS klasse “category-travel,” omdat ik een categorie heb met de naam “Travel” op de site.

Bewaar de CSS tag voor later.

Navigeer daarna terug naar de Additional CSS sectie in jouw WordPress Customizer.

Plak de volgende code in dat vak, waarbij je de category-travel class vervangt door je eigen class en een echte afbeeldings URL plaatst op de plaats waar http://YOURIMAGEURL.jpeg staat.

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Klik op de knop Publish om de wijzigingen op te slaan.

Ga tenslotte terug naar de categorie archiefpagina op de front-end van jouw WordPress site. Deze zou nu dezelfde pagina moeten tonen als voorheen, maar dan met de achtergrond zoals gespecificeerd in de CSS code. Als je problemen ondervindt met de opmaak van de WordPress achtergrondafbeelding, schakel dan terug naar het Additional CSS paneel om elementen zoals de positie, grootte en herhaalfunctie van de achtergrond aan te passen.

Hoe een achtergrondafbeelding aan je WordPress loginpagina toe te voegen

De WordPress loginpagina heeft twee versies: één voor gewone gebruikers die naar jouw site komen en zich willen registreren en inloggen op jouw website, en de andere voor interne gebruikers, zoals admins en auteurs.

Deze loginpagina’s zijn gescheiden van de hoofdwerking van jouw website (de meeste bestanden bevinden zich in het wp-login.php bestand). De aangepaste achtergrondafbeelding tool zal dus niet overlopen in de loginmodules.

Je kunt dit doen door gebruik te maken van een plugin genaamd Custom Login Page Customizer. Om te beginnen, installeer en activeer je de plugin op jouw WordPress site.

Aan de linkerkant verschijnt een nieuw tabblad in het WordPress dashboard menu voor LoginPress.

Ga naar LoginPress > Settings.

Hier kun je de plugin-instellingen aanpassen voor het toevoegen van jouw achtergrond en het aanpassen van elk ander deel van jouw loginpagina.

Het biedt bijvoorbeeld instellingen om gebruikers automatisch te onthouden, aangepaste wachtwoordvelden te tonen en sessies te laten verlopen na een bepaalde periode.

Voor het activeren van een aangepaste afbeeldingsachtergrond voor de login pagina, klik op LoginPress > Customizer.

Dit stuurt je naar de WordPress Customizer, waar een nieuwe pagina is toegevoegd voor de LoginPress tools. Je zult tabbladen zien voor thema’s, logo, achtergrond en meer.

Het is ook mogelijk om de loginpagina aan te passen door te klikken op de knoppen in het visueel voorbeeld.

We zullen niet alle andere instellingen behandelen aangezien we ons nu vooral richten op de achtergrond.

Klik op de Background tab om verder te gaan.

Het eerste wat je moet doen is beslissen of je een kleurenachtergrond of een afbeeldingsachtergrond wilt.

Als je liever een gekleurde achtergrond hebt, zoek je het veld Background Color op en klik je op Select Color. Er verschijnt nu een kleurenpaneel waarin je precies kunt kiezen welke kleur voor jouw bedrijf geschikt is.

Zoals je kunt zien, wordt de verandering ook van kracht in de WordPress Customizer preview.

Direct onder de Background Color instelling, is er een Background Image sectie.

Zet de schakelaar Enable Background Images aan om een verzameling van vooraf gemaakte achtergrondafbeeldingen te tonen.

Er zijn er niet veel om uit te kiezen in de gratis versie, maar de plugin voegt er meer toe als je besluit om te upgraden naar de premium versie.

Ga je gang en test deze vooraf gemaakte achtergronden om te zien of ze kunnen werken voor jouw merk.

Het meest voor de hand liggende pad is om je eigen afbeelding te uploaden als achtergrond voor de loginpagina.

Zoek naar de kop Background Image en klik op de knop Select Image.

Je wordt naar de WordPress Mediabibliotheek gebracht waar je ofwel een foto van jouw computer kunt uploaden of er een kunt kiezen die al in WordPress aanwezig is.

Selecteer de gewenste foto en klik op de knop Choose Image.

De geactiveerde achtergrondafbeelding verschijnt als een thumbnail in het Customizer paneel en in de daadwerkelijke preview van jouw loginpagina.

Je hebt nu de optie om op de Publish knop te klikken en het te houden bij wat er op het scherm staat. Of je kunt naar beneden scrollen naar de aanvullende instellingen om ervoor te zorgen dat de beste weergave van de geüploade afbeelding op dat moment actief is.

Klik op het Background Repeat dropdown veld en test opties zoals Repeat, No-Repeat, en Repeat-x.

Afhankelijk van de grootte van jouw foto, kun je de afbeelding wel of niet een beetje zien bewegen.

Kijk vervolgens naar de opties voor ‘Positie selecteren’ om de achtergrondafbeelding nog meer te verplaatsen.

Standaard wordt de afbeelding in het midden van het scherm geplaatst, maar soms ziet het er beter uit als je het ergens rechtsonder of linksboven laat plaatsen. Probeer ze allemaal uit om uit te vinden welke het beste werkt voor jouw achtergrondafbeelding.

De WordPress Background Image Size dropdown heeft instellingen voor hoe de afbeelding de schermruimte bedekt, waarbij de grootte wordt aangepast met elke vooraf ingestelde optie.

Nogmaals, test deze uit om te beslissen welke het beste lijkt. Misschien ben jij van mening dat iets als de instelling Contain een beter beeld geeft dan de instellingen Auto of Cover.

En dat is alles wat er komt kijken bij het uploaden en activeren van een achtergrondafbeelding voor jouw loginpagina!

De laatste instelling is beschikbaar voor als je een video als achtergrond wilt laten zien in plaats van een afbeelding. Zet die instelling aan als je een interessante video hebt die gerelateerd is aan je bedrijf en niet te veel aandacht weghaalt van mensen die zich aanmelden op de site.

Zodra alles klaar is, klik je op de knop Publish om de achtergrond van jouw loginpagina in te schakelen en te kunnen zien wanneer een gebruiker zich probeert te registreren of in te loggen op de site.

Hoe een achtergrondafbeelding aan jouw navigatiemenu toevoegen

Het is je misschien opgevallen dat sommige websites mooie menu’s hebben met achtergrondafbeeldingen of pictogrammen. Dit is een veelvoorkomende praktijk in de e-commerce wereld, waar het merk een mega menu kan hebben met categorieën en achtergrondafbeeldingen voor elke categorieknop.

Als je geïnteresseerd bent in het toevoegen van achtergronden aan jouw menu, kijk dan naar ons artikel over de beste WordPress menuplugins. Veel van deze menuplugins bieden opties om afbeeldingen en kleurenachtergronden in je menu op te nemen.

Aangezien er verschillende plugins zijn om een bepaalde achtergrond voor navigatiemenu’s toe te voegen, zullen we tutorials geven voor twee, waarvan er één achtergronden achter je submenu toestaat. De andere, daarentegen, voegt een achtergrond toe aan je mobiele menu.

Om een achtergrondafbeelding toe te voegen aan verschillende submenu’s, installeer en activeer je de WP Mega Menu plugin. Met deze plugin kun je een megamenu met meerdere dropdown niveaus activeren en beheren. Het is ideaal voor grote online winkels, maar het doet de truc voor kleinere menu’s ook, vooral als je een achtergrondafbeelding of pictogrammen wilt toevoegen.

Begin met het vinden van de WP Mega Menu tab in het WordPress dashboard.

Klik op het menu-item Themes.

Hier zie je een lijst van standaard thema’s gemaakt voor jouw menu door de plugin.

Je kunt klikken om een van de thema’s te bewerken of jouw eigen ontwerp vanuit het niets toe te voegen.

Elk thema heeft zijn eigen instellingen waar je elementen specificeert zoals de thematitel, menubalk opties, en het merklogo. Zowat elk onderdeel van je menu is aanpasbaar, van het dropdown menu tot de submenu’s.

Voor de achtergrond van het menu hoef je echter alleen maar te weten welk thema je wilt kiezen.

Ga naar Appearance > Menus in het dashboard.

Je ziet een nieuwe module die linkt naar de Mega Menu Settings.

Klik om het megamenu in te schakelen op Enable, kies vervolgens welke je het beste bevalt voor jouw website.

Klik tenslotte op de knop Save.

Verplaats nu je aandacht naar het Menu Structure gebied.

Als je over een van jouw huidige menu-items scrolt, zie je een WP Mega Menu knop. Dit is waar je de lay-out en het ontwerp voor elke dropdown sectie aanpast.

Klik op de WP Mega Menu knop voor elk menu item dat je wilt. In dit geval voegen we een uitklapbaar mega-menu toe aan het tabblad Shop.

Opmerking: We gaan ervan uit dat je al een menu hebt geconfigureerd op je WordPress site. Lees onze WordPress Dropdown Menu handleiding als je daar hulp bij nodig hebt.

In het nieuwe popup venster, zet je de schakelaar om, om het Mega Menu in te schakelen voor dat specifieke menu-item.

Je kunt dan een dropdown rij toevoegen en een aantal van de vele widgets van de linkerkant naar die rij slepen. We zullen bijvoorbeeld een lijst met producten slepen, zodat ze verschijnen wanneer iemand over het Shop menu-item scrolt.

Om een achtergrond toe te voegen aan dit dropdown gebied, klik op de Options knop in de linkerbenedenhoek.

Zoek het veld ‘Upload Background Image.’

Klik op de knop ‘Upload‘ en zoek de juiste foto in jouw Mediabibliotheek om deze als achtergrond te gebruiken.

Een thumbnail verschijnt nadat je deze uit de Mediabibliotheek hebt geselecteerd.

Er zijn nog enkele andere instellingen om rekening mee te houden, dus voel je vrij om die te controleren als je wilt.

Zorg ervoor dat u op de knop Save Changes klikt onderaan het paneel Options.

Je moet ook klikken op Save Menu in het Menu Structure gebied van het WordPress dashboard.

Navigeer nu naar de front-end van jouw website om het menu te zien. Als je over het item scrolt dat we net hebben aangepast, zou je een dropdown sectie moeten zien met de achtergrond.

Een andere manier om een achtergrondafbeelding aan een menu toe te voegen is door een mobiel, responsief menu te gebruiken dat wordt weergegeven wanneer iemand je website via een mobiel apparaat bezoekt.

Je kunt een achtergrond achter het mobiele menu plaatsen met behulp van de WP Mobile Menu plugin.

Na het installeren en activeren van de WP Mobile Menu plugin, ga je naar Mobile Menu Options in het WordPress dashboard.

De plugin biedt verschillende manieren om jouw mobiele menu te configureren. De algemene vereiste is dat je een van de menuformats inschakelt en aangeeft welk WordPress menu je wilt gebruiken voor dat mobiele menu.

We kunnen bijvoorbeeld klikken op de Enable Left Menu schakelaar (het inschakelen van een mobiel menu dat aan de linkerkant van het scherm zit) en de Main Menu optie kiezen uit de Left Menu dropdown. Dit koppelt ons huidige Main Menu aan het mobiele menu, zodat bezoekers dezelfde tabbladen te zien krijgen.

Het hangt af van het type mobiele menu dat je maakt, maar omdat we een menu aan de linkerkant maken, kunnen we op het tabblad Left Menu klikken om de juiste instellingen te onthullen om een achtergrond toe te voegen.

Scrol naar beneden naar het veld Panel Background Image en klik op het “+” teken om de Mediabibliotheek te openen.

Selecteer een afbeelding uit jouw Mediabibliotheek en voeg deze toe aan het veld.

Je zou een thumbnail van de achtergrondafbeelding moeten zien als bevestiging.

Selecteer de knop Save Changes om de achtergrond te activeren.

Aangezien de plugin mobiele menu’s genereert, kan het menu alleen verschijnen wanneer je browser is ingesteld op een smalle breedte of wanneer je naar je site gaat op een telefoon of tablet.

Het nieuwe menu wordt geconsolideerd onder een hamburger-pictogram (drie horizontale lijnen).

Klik daarop om het nieuwe menu met de achtergrond te testen.

Zoals in de schermafbeelding te zien is, wordt de achtergrond achter het hele mobiele menu geplaatst zodat iedereen het kan zien.

Hoe voeg je een WordPress achtergrondafbeelding toe aan een onderhoudspagina

Alle websites hebben af en toe onderhoud nodig, en soms duurt dat onderhoud zo lang dat het weergeven van een onderhoudspagina helpt.

Achtergrondafbeeldingen spelen een grote rol bij het werken met onderhoudspagina’s. De meeste onderhoudspagina’s bestaan uit een schermvullende achtergrondafbeelding en misschien wat tekst of links met meer bronnen.

Als je al een onderhoudspagina hebt en deze bevat geen achtergrondafbeelding, overweeg dan de volgende stappen om een mooie omgeving te genereren voor wanneer je jouw website misschien voor een bepaalde tijd moet afsluiten voor het publiek.

Je kunt een achtergrondafbeelding toevoegen aan een onderhoudspagina met behulp van de Maintenance plugin. Installeer en activeer de plugin op je website.

Zodra deze actief is, vind je de Maintenance is On/Off knop bovenaan het dashboard.

Klik op de knop om naar de Instellingen pagina van de Maintenance plugin te gaan.

Een andere manier om naar de Instellingen pagina te gaan is door te klikken op het Maintenance menu-item in het zijmenu van het dashboard.

De Maintenance plugin’s instellingenpagina heeft een behoorlijke verzameling van opties om aan te passen, maar het belangrijkste gebied om te overwegen is de General Settings module. Hier kun je een Headline en Description schrijven, die beide dienen als de tekst die de achtergrond – die we zo gaan toevoegen – overlapt.

De paginatitel verschijnt in de browsertab, dus je zou moeten overwegen die ook aan te passen.

Je kunt de Maintenance plugin gebruiken voor alles, van onderhoudspagina’s tot ‘coming soon’-pagina’s, dus je kunt iets typen als “Onze site wordt onderhouden”, of je kunt een beetje informatie over je bedrijf laten zien en een formulier opnemen waar mensen hun e-mailadres in kunnen typen.

Verder biedt de plugin een optie om je logo te uploaden, die ook overlapt bovenop de achtergrondafbeelding.

Klik op de Upload Logo knop en kies je logo om de thumbnail te zien in het dashboard.

Ten slotte vraagt het veld Background Image je om te klikken op de knop Upload Background Image.

Upload een afbeelding vanaf je computer of ga door jouw Mediabibliotheek om een achtergrond te vinden die geschikt is voor de onderhoudspagina.

Opmerking: De beste achtergrondafbeeldingen voor onderhoudapagina’s zijn groot, hebben een hoge resolutie en zijn liggend georiënteerd. Een alternatief voor de “Portret modus” achtergrond is beschikbaar in de instellingen hieronder.

Zodra je de achtergrond hebt gekozen, verschijnt deze als een kleinere thumbnail in het dashboard.

Hoewel een achtergrondafbeelding in liggende richting het meest zinvol is voor desktopcomputers en bredere schermen, komen veel mensen op jouw site terecht met schermen in staande richting, zoals wanneer een telefoon verticaal wordt gehouden.

Daarom zal een bredere achtergrondafbeelding er niet zo mooi uitzien. Dat is waarom de plugin een Portrait Mode Background aanbiedt die dient als een alternatief, die responsief wordt verwisseld wanneer een gebruiker de pagina bezoekt met behulp van een portret-georiënteerd scherm.

Het is belangrijk om een afbeelding in dit veld op te nemen, dus klik op de Upload image for portrait device orientation knop.

Zoek deze keer een afbeelding die hoger is dan breed (portretmodus). Je kunt de originele achtergrondafbeelding altijd bijsnijden om er een portretafbeelding van te maken, of je kunt een heel andere afbeelding uploaden om de plek op te vullen.

Markeer de afbeelding die je wilt en klik op de knop Select Image om deze in het dashboard in te voegen.

Al deze instellingen betekenen niets, tenzij je de Maintenance Mode activeert.

Om dat te doen, zoek je de Maintenance On/Off knop bovenaan de Instellingenpagina.

Zet de schakelaar zo dat er “On” staat en klik dan op de knop Save Changes.

Ga naar de voorkant van jouw website om te controleren of de achtergrondafbeelding en de onderhoudspagina correct worden weergegeven.

Er is een grote kans dat dit niet het geval is.

Daar zijn twee redenen voor: Ten eerste moet je uitloggen uit het WordPress Admin account om de onderhoudsmodus website te zien. Ten tweede moet je wellicht de cache van de site wissen om de gewijzigde inhoud te kunnen bijwerken.

Wanneer ik bijvoorbeeld uitlog uit het Admin account, verschijnt de onderhoudspagina nu wanneer ik naar een willekeurige pagina ga.

De achtergrondafbeelding is er, samen met mijn aanpassingen zoals het logo en de tekstbeschrijving.

Door het formaat van het browservenster te wijzigen in een meer staande oriëntatie, wordt de achtergrond in portretmodus op zijn plaats vastgezet.

Je zou de portretmodus ook moeten zien wanneer je de site bezoekt op een telefoon of tablet.

Een ander type achtergrondafbeelding met de plugin wordt een Preloader Image genoemd. Deze laadt in wezen een snelle afbeelding met een geanimeerd effect voordat de eigenlijke onderhoudspagina, achtergrond, en inhoud wordt onthuld.

Net als de gewone achtergrondafbeelding, klik op de Upload Preloader knop om een afbeelding te vinden die er mooi uitziet en voeg het toe aan het dashboard.

Nogmaals, klik op de Save Changes knop en leeg de cache.

Standaard draait het Preloader Image effect even rond, en verdwijnt dan om de onderhoudspagina en achtergrondafbeelding te presenteren.

Het is geheel aan jou of je dit type effect wilt behouden of niet.

Verschillende andere achtergrondelementen zijn beschikbaar voor jou om mee te experimenteren in het instellingenpaneel van de Maintenance plugin.

Misschien wil je bijvoorbeeld een achtergrondkleur toevoegen in plaats van een achtergrondafbeelding.

Als dat het geval is, ga dan naar het Background Color veld en selecteer een kleur die bij jouw merk past.

De achtergrondkleur wordt niet getoond voor de onderhoudspagina tenzij je alle andere achtergrondafbeeldingen uitschakelt.

Zorg er dus voor dat je de achtergrondafbeelding verwijdert.

Je moet ook de achtergrondafbeelding voor de portretmodus verwijderen.

Sla de wijzigingen op en wis de cache. Ga dan naar de voorkant van je site om de achtergrondkleur in werking te zien.

Andere instellingen om te overwegen zijn onder andere de letterkleur, lettertypefamilie, en de achtergrond vervagen.

We raden ook aan om na te denken over of je een front-end login nodig hebt of niet. Dit biedt een manier voor gebruikers om in te loggen op hun accounts en toegang te krijgen tot profielen indien nodig.

Als alles klaar is, klik dan op de Save Changes knop.

De Maintenance plugin biedt ook verschillende vooraf gemaakte thema’s met mooie achtergrondafbeeldingen en professioneel ontworpen lay-outs en tekst.

Je kunt thema’s vinden voor coming soon pagina’s en onderhoud lay-outs, samen met pagina’s om e-mailadressen en andere contactinformatie te verzamelen.

Je moet de thema’s wel kopen om ze te kunnen gebruiken.

Afhankelijk van jouw budget, zijn ze vrij goedkoop en zien ze er geweldig uit.

Voor degenen die niet geïnteresseerd zijn in het kopen van een thema, zijn alle instellingen die hierboven zijn behandeld tot jouw beschikking. Je kunt ook naar de Custom CSS module gaan om jouw onderhoudspagina en achtergrondafbeelding te configureren zoals jij dat wilt.

Onthoud dat de instellingen voor de onderhoudspagina zelden van kracht worden, tenzij je uitlogt uit jouw beheerdersaccount en op de knop Clear Cache klikt.

Je kunt de Clear Cache knop vinden in de rechterbovenhoek van het dashboard wanneer je Kinsta gebruikt. Als je een andere host gebruikt, overweeg dan een van de vele caching plugins op de markt.

Zodra je de cache hebt gewist en je instellingen hebt opgeslagen, zou je een mooie achtergrondafbeelding moeten zien die de onderhoudspagina aanvult!

Hoe een WordPress achtergrond toevoegen met een externe paginabouwer

Ons artikel over de beste paginabouwers biedt een lijst met opties voor het kiezen van een paginabouwer met drag-and-drop functies. WordPress bevat al een paginabouwer in Gutenberg, maar toch geven veel website-eigenaren de voorkeur aan andere oplossingen.

In het volgende gedeelte wordt uitgelegd hoe je een achtergrond kunt implementeren met behulp van enkele populaire paginabouwers, waaronder Elementor, Beaver Builder en Pagebuilder by SiteOrigin.

Een WordPress achtergrond toevoegen met Elementor

Elementor, de populaire paginabouwer bedoeld om de productie van websites drastisch te versnellen, biedt een gratis plugin met verschillende tools voor achtergrondafbeeldingen.

Elementor biedt ook visuele achtergrondflexibiliteit voor verschillende delen van jouw website in plaats van achtergronden te beperken tot de hele website. Je kunt bijvoorbeeld een achtergrond toevoegen achter zowat elke sectie en verschillende achtergronden tonen van pagina tot pagina.

Om te beginnen, installeer en activeer de Elementor plugin.

Elementor verspreidt zijn achtergrondinstellingen over de hele bouwer, waardoor het gemakkelijk is om een element te selecteren en een achtergrond te implementeren indien nodig. Daarom kun je technisch gezien naar elke pagina of bericht gaan met de verwachting dat je toegang hebt tot een achtergrond upload knop.

In dit geval, gaan we naar de Homepage van onze test site. Ga naar de pagina van je keuze door te kiezen uit de lijst bij Pages > All Pages. Je kunt hetzelfde doen met Posts.

Eenmaal op de standaard WordPress pagina-editor, klik op de knop Edit with Elementor.

Hierdoor verschuift de weergave op jouw scherm naar de Elementor Editor. Hier heeft de linkerkant een menu met drag-and-drop modules om jouw pagina op te bouwen en te bewerken.

De achtergrondfunctionaliteit is niet beschikbaar in een sectie of blok maar wel in de primaire Settings voor die pagina.

Klik daarom op het kleine Instellingen icoon (het ziet eruit als een tandwiel) in de linkerbenedenhoek van de editor.

Dit toont een sectie voor algemene pagina-instellingen.

Klik op de tab Style bovenaan de sectie Page Settings.

Zoek onder Style het veld Background Type en klik op het Penseel icoon om een standaard achtergrond toe te voegen.

Kies vervolgens het type achtergrond dat je wilt weergeven. Met het veld Color kun je bijvoorbeeld de achtergrond veranderen in een effen kleur. Er is ook een optie Gradient in het veld Background Type als dat meer jouw stijl is.

Klik op de knop Choose Image onder het veld Image om jouw mediabibliotheek op te roepen en een achtergrondafbeelding te kiezen die geschikt is voor deze pagina.

Zoals altijd, test je achtergrondafbeeldingen en houd je je aan de optimale afmetingen en beste manieren (hoge resolutie en staande oriëntatie voor de meeste), selecteer dan de afbeelding die goed werkt en klik op de knop ‘Insert Media’.

De geselecteerde achtergrondafbeelding verschijnt nu in de Elementor websitepreview aan de rechterkant. Het kan nodig zijn om andere delen van je content aan te passen om ervoor te zorgen dat items zoals tekst en afbeeldingen zichtbaar zijn wanneer ze bovenop de achtergrond staan.

Elementor biedt afbeeldingsachtergrond instellingen zoals Position, Attachment, Repeat, en WordPress Background Image Size. Pas de instellingen aan om te bepalen of jouw achtergrond er beter uitziet als een vaste bijlage, of misschien met een oriëntatie rechtsboven of een alternatieve grootte.

Druk op de knop Update om alle wijzigingen op de pagina op te slaan en de nieuwe achtergrond van jouw website te publiceren.

Sectie achtergronden met Elementor

Elementor biedt geavanceerde achtergrondfunctionaliteit voor de meeste secties die aan jouw pagina’s zijn toegevoegd.

Het enige wat je hoeft te doen is een sectie op een Elementor pagina te selecteren en de Achtergrond instellingen aan te passen om de achtergrond te beperken tot alleen dat gebied.

We kunnen bijvoorbeeld deze Text Editor sectie selecteren om de Tekst sectie instellingen te bekijken. .

Kies het tabblad Advanced en zoek de sectie Background binnen dat tabblad.

De Achtergrond instellingen omvatten Background Type, Color, Image, en meer, net als de instellingen die we zagen voor de algemene pagina achtergrond instellingen. Het enige verschil is dat deze instellingen beperkt zijn tot de geselecteerde sectie.

Kies het Penseel icoon voor Background Type, klik dan op de Choose Image knop onder het Image veld.

Kies een afbeelding uit de Mediabibliotheek en klik op de knop Insert Media.

Zoals je kunt zien, blijft de achtergrondafbeelding binnen de grenzen van die sectie terwijl ze achter de inhoud zit die al voor die sectie is gemaakt.

Gebruik de Position, Attachment, Repeat, en Size selectors om aan te passen hoe de achtergrondafbeelding wordt gepresenteerd in de sectie.

Klik tenslotte op de knop Update om de wijzigingen op te slaan.

Een achtergrondafbeelding toevoegen met Beaver Builder

De Beaver Builder plugin bevat een Lite versie met een aantal basis achtergrondtools. Het is een van de meest populaire paginabouwers op de markt, en biedt vele contentmodules voor items zoals video, afbeeldingen, paragrafen, en nog veel meer.

Daarnaast kun je er een achtergrondafbeelding, -kleur of -video mee implementeren, met behulp van visuele tools en CSS om het achtergrondelement op je hele website, één pagina of een afzonderlijke sectie op een pagina te plaatsen.

Installeer eerst de Beaver Builder plugin om te beginnen.

Ga naar een pagina of bericht om deze te bewerken met Beaver Builder.

Je moet eerder gemaakte pagina’s converteren naar de Beaver Builder indeling. Als alternatief heb je de optie om een pagina vanaf nul aan te maken en te kiezen om de pagina in Beaver Builder te bewerken.

Voor het converteren van een huidige pagina naar Beaver Builder, open je die pagina-editor en klik je op het pictogram met de drie stippen om het menu View in de rechterbovenhoek te openen.

Scrol naar beneden om de Convert to Beaver Builder link te vinden en te kiezen.

Deze probeert alle inhoud die je op je pagina hebt te compileren en die elementen in compatibele Beaver Builder modules te schuiven.

Om een pagina vanaf nul te maken, ga je naar Pages > Add New.

Klik dan op de knop Launch Beaver Builder.

De Beaver Builder plugin brengt je naar een front-end view van de webpagina. Het neemt het grootste deel van het scherm in beslag en werkt als een echte front-end editor, waar je op de elementen klikt en met je muis over de vakken beweegt.

De eerste manier om een achtergrond toe te voegen via Beaver Builder is door een achtergrond te uploaden naar een sectieblok. Dit kan het grootste deel van de pagina in beslag nemen of een fractie van de pagina, afhankelijk van de grootte van je sectieblok.

Eenmaal geselecteerd, zoek dan de Row Settings knop (het ⚙ pictogram).

Klik op dat icoon om de instellingen voor die rij te openen. Je kunt dit ook doen met secties en kolommen, en andere soorten blokken.

Een Instellingen paneel verschijnt bovenaan jouw website preview. Klik op het tabblad Style en zoek dan naar de sectie Background.

Onder Background, klik op het dropdown menu om alle achtergrondtypes te tonen.

Je hebt verschillende achtergrondtypes om te overwegen, waarvan er één voor een foto is. De andere zijn:

• Kleur
• Gradient
• Video
• Ingesloten Code

Voel je vrij om de verschillende achtergrondtypes uit te testen.

Misschien staat een Gradient achtergrond in jouw ogen bijvoorbeeld beter dan een afbeelding. Elk van de achtergrond types heeft zijn eigen instellingen. Het Gradient type, in dit geval, vraagt om twee kleuren om het kleurverloop van de ene naar de andere kleur te laten overgaan.

Als je kiest voor de foto-achtergrond, krijg je velden om te kiezen uit de mediabibliotheek of om een URL in te plakken voor de afbeelding. Klik op de link Select Photo als je de fotobron uit de Mediabibliotheek gebruikt.

Zoek jouw favoriete achtergrondfoto en klik op de knop Select Photo.

Beaver Builder plaatst de foto in de eerder gekozen achtergrondruimte. De sectie Foto instellingen vraagt hoe je de foto wilt opmaken. Kies uit opties zoals Size, Repeat, Position en Attachment.

Globale en paginavullende Beaver Builder achtergrondfoto’s

Beaver Builder werkt met de standaard WordPress design tools om gebruik te maken van de ingebouwde achtergrondfuncties.

Daarom kun je naar het tabblad Appearance > Background gaan om een foto achtergrond voor jouw gehele website te activeren.

Als alternatief, open een willekeurige webpagina in Beaver Builder en klik op het Tools dropdown menu in de linkerbovenhoek.

Klik hier op de optie Global Settings.

Het Global Settings Panel biedt de mogelijkheid om je hele website te veranderen, waarbij je ingebouwde WordPress codering kunt overschrijven of wijzigen. Daarom willen we een CSS code blok invoegen om de achtergrondafbeelding van de hele website (globaal) te wijzigen.

Klik op het CSS tabblad in de Global Settings, en plak het volgende stukje code in het veld:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Vervang de URL naar Afbeelding tekst door de URL naar de gewenste achtergrondfoto. Je kunt ook dingen als herhalingen, bijlages, en afmetingen van de achtergrond veranderen met de CSS code.

Het is zinvoller om Beaver Builder te gebruiken voor aangepaste pagina-achtergronden, aangezien elke pagina zijn eigen afbeelding als achtergrond heeft.

Op jouw pagina editor, open het Tools menu opnieuw.

Selecteer de Layout CSS & Javascript optie.

Plak dezelfde code in het CSS tabblad, verander de URL naar Afbeelding tekst naar de daadwerkelijke URL en pas de instellingen aan die je wilt:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Zoals je kunt zien, verandert de hele achtergrond naar de URL afbeelding die je in de CSS codering hebt staan. Houd in gedachten dat het Layout CSS / Javascript paneel alleen de huidige pagina controleert. Je zult de achtergrond niet zien op andere pagina’s dan deze.

Voeg een eenvoudige rij of widget achtergrond toe met de Page Builder by SiteOrigin

De paginabouwer van SiteOrigin is weer een andere drag-and-drop visuele website-maker. Het is beperkt in zijn mogelijkheden om achtergronden toe te voegen voor de gehele website (je zou terug moeten keren naar de standaard WordPress Custom Background tool). Toch biedt het instellingen om achtergrondafbeeldingen en kleuren toe te voegen voor rijen en widgets gebruikt door SiteOrigin.

Download en activeer eerst de Pagebuilder by SiteOrigin plugin.

Navigeer naar een nieuwe pagina of overweeg een SiteOrigin rij toe te voegen aan een huidige pagina op de website.

Elke SiteOrigin sectie geeft je de mogelijkheid voor Add Widget of Add Row. Je hebt ook de mogelijkheid om te bladeren door de Pre-built Layouts als je liever niet wilt beginnen met een ontwerp vanaf nul.

Het goede nieuws is dat zowel widgets als rijen in SiteOrigin instellingen hebben om achtergrondafbeeldingen op te nemen.

Klik daarom op de knop Add Widget of Add Row om verder te gaan.

In dit voorbeeld kijken we naar de Widgets bibliotheek.

Hier kun je kiezen uit een van de vele widgets die SiteOrigin aanbiedt, van navigatie menu’s en pagina’s tot Post Inhoud en Product Lijsten.

Wij kiezen de Products widget voor dit voorbeeld, maar je kunt kiezen voor een van de vele andere widgets gebaseerd op de behoeften van jouw ontwerp. Je kunt deze widgets ook groeperen met een rij, en dan een achtergrondafbeelding toevoegen aan die rij, zodat de achtergrond achter meerdere widgets verschijnt.

De nieuwe widget of rij komt terecht in de SiteOrigin pagina-editor. Het grootste deel van SiteOrigin blijft in het WordPress dashboard, dus er is niet zo veel van een front-end editor als er is met andere paginabouwers.

Om een achtergrond toe te voegen aan een SiteOrigin item, scrol over het element en klik op de Edit link.

Ik koos de Products widget voor dit voorbeeld, maar elke widget heeft zijn eigen instellingen om te configureren hoe het eruit ziet op je website.

De achtergrond tools staan onder het Design dropdown menu. Klik daarop om verder te gaan.

Zoek het veld Background Image en klik op de knop Select Image.

Je hebt ook de mogelijkheid om een Externe URL in te plakken voor de achtergrondafbeelding.

De Mediabibliotheek toont je de huidige afbeeldingen die je naar WordPress hebt geüpload. Klik op de afbeelding die het beste werkt voor deze achtergrond en selecteer de knop Done om deze in de SiteOrigin module te plaatsen.

Nu toont het veld Background Image een thumbnail van die foto.

Scrol naar beneden door de instellingen om alles te configureren van de Background Image Display tot de Font Color voor de overlappende tekst.

In het algemeen zou je de gewenste resultaten moeten kunnen krijgen door de Cover weergave te kiezen. Het lijkt erop dat de SiteOrigin plugin standaard voor de Tiled weergave kiest, dus het kan zijn dat je dat moet veranderen.

Zorg ervoor dat je op de Done knop klikt als je klaar bent met je aangepaste instellingen voor de achtergrond.

De widget (in dit geval, de Products widget) gaat in de SiteOrigin WordPress editor voor die pagina. Je kunt dit element verslepen waar je maar wilt op de pagina en nieuwe widgets en rijen erboven en eronder toevoegen.

Je moet of op de Preview of Update knop klikken en dan navigeren door de front-end van de pagina om de resultaten te zien.

De huidige achtergrond die ik heb toegevoegd verschijnt binnen de beperkingen van de Products widget van eerder. Deze achtergrond moet natuurlijk nog wat bewerkt worden om er mooier uit te zien, maar het is een goed begin om de ruimte in te vullen met een veel creatiever uitziende achtergrondafbeelding.

Unieke achtergrondafbeeldingen toevoegen met Brizy

De laatste paginabouwer binnen deze uitleg is Brizy, en biedt stijlvolle templates en een superieure front-end interface voor het toevoegen van ongebruikelijke ontwerpen en snelle aanpassingen.

De Brizy paginabouwer bevat een uitgebreide set drag-and-drop modules om in jouw huidige website te integreren. Je kunt ook beginnen met een lege templateen de hele website met Brizy bouwen.

Je zult ook blij zijn te horen dat Brizy ook een achtergrond tool heeft voor zo ongeveer elk element dat je opneemt via de paginabouwer. Niet te vergeten, Brizy beschikt over verschillende unieke achtergrondstijlen, zoals het toevoegen van een zichzelf herhalende (loop) video aan de achtergrond of een volledige kaart.

Om te profiteren van deze achtergrondinstellingen, installeer en activeer de Brizy plugin om te beginnen.

Een groot deel van het Brizy ontwerpproces vereist dat je begint met een lege template. Brizy zal proberen jouw oudere ontwerpen om te zetten in Brizy modules, maar wij zijn van mening dat het het beste is om opnieuw te beginnen.

Ga naar een pagina of bericht in jouw WordPress dashboard en begin met het opbouwen van de pagina met een titel en misschien wat content.

Je zou een knop moeten zien met de tekst Edit With Brizy. Klik daarop om naar de volledige Brizy paginabouwer te worden gestuurd.

De Brizy paginabouwer toont een volledig voorbeeld van jouw website met knoppen, tekst en afbeeldingen. Als de pagina leeg is, klik je op de knop Start Building Your Page.

Zoek naar de tabbladen Layouts and Blocks in de bovenste menubalk.

De layouts zijn kant-en-klare webpagina’s, gevuld met demo-inhoud en klaar om te gebruiken, zolang je de inhoud van jouw eigen bedrijf maar aanpast. De blokken zijn kleinere brokken van webpagina’s, maar ze zijn nog steeds vooraf gemaakt en vaak gemakkelijker te gebruiken en te manipuleren dan wanneer je zelf een blok zou maken.

Het maakt niet uit welke richting je op gaat. Blader door de layouts en blokken en voeg er zoveel toe aan de pagina als je wilt. Dit zijn simpelweg de elementen die je zult gebruiken om een complete webpagina te vormen.

Nadat je een paar blokken of lay-outs op de webpagina hebt gezet, ga je terug naar het editorscherm om je werk te bekijken.

Je zult zien dat elke bloksectie een Settings pictogram heeft aan de rechterbovenkant van het blok, dat meestal verschijnt als je over de sectie scrolt.

Klik hierop voor het blok van je keuze. We zullen een achtergrond aan dat blok toevoegen.

Het paneel met Block Settings blijft in de rechterbovenhoek staan. Scrol over de menupictogrammen om te zien wat ze allemaal doen.

Een ervan is voor Colors, en daarmee bedoelen ze een gekleurde achtergrond. Je kunt dat veranderen en een kleurverloop toevoegen als je het liever bij een effen of kleurverloop achtergrondweergave houdt.

De icoonknop links bevat de Background instellingen.

Klik op die knop om de snelle tools te openen voor het uploaden van een achtergrondafbeelding naar dit blok.

Brizy biedt drie media achtergronden:

• Afbeeldingen
• Video’s
• Kaarten

Probeer eerst het type Afbeelding om te begrijpen hoe het werkt met jouw huidige lay-out.

Klik op het Image Upload gebied om een foto te vinden in de mediabibliotheek en voeg deze toe aan de achtergrond.

We hebben een foto van een houten paneel gevonden voor deze tutorial en aangegeven dat we geen parallax effect willen hebben.

Dit geeft een aangenaam effect omdat de gekleurde achtergrond dient als een overlay, maar we zien nog steeds de textuur van het hout erachter.

Vergeet niet dat je altijd het Parallax veld kunt aanpassen om de achtergrondafbeelding een vaste, geanimeerde, of scrollende achtergrond te maken.

En dat is hoe je een achtergrondafbeelding invoegt met Brizy!

Het beste aan Brizy is dat je door het ontwerp kunt blijven gaan en op de knop Instellingen van elke sectie kunt klikken.

Een sectie verder kunnen we nog een achtergrondafbeelding invoegen zonder er veel tijd aan te besteden.

En om de kracht van de andere achtergrondtypes te demonstreren, kunnen we klikken op het achtergrondtype Map, een adres intikken, en kijken hoe een kaart van die locatie verschijnt direct achter de content op de voorgrond.

De kaart wordt gesitueerd als een volledige achtergrond en heeft een zoom functie als het er niet helemaal goed uit komt met de standaard instellingen.

Tot slot raden wij aan om de Brizy achtergrond videotool te bekijken, die zich in dezelfde sectie bevindt als de afbeelding achtergrondtool. Het werkt door het invoegen van een video URL (YouTube of Vimeo), waardoor een volledige video direct achter de voorgrond inhoud wordt weergegeven. Het biedt zelfs een instelling om de video te loopen en te kiezen wanneer het moet beginnen als de gebruiker over de sectie scrolt.

De geanimeerde gif hieronder geeft een kort voorbeeld van de video in actie, ook al kan het waarschijnlijk wel wat bewerking gebruiken.

Achtergrondafbeelding afmetingen, bron, en basisbewerking

We hebben eerder in het artikel vermeld dat er geen perfecte grootte is voor een achtergrondafbeelding, maar we raden aan om niet kleiner te beginnen dan 1024 x 768 pixels en een gebruikelijke beeldverhouding aan te houden zoals 16:9. De beeldverhouding is niet zo belangrijk als de werkelijke grootte en resolutie van de afbeelding, aangezien je de afbeelding kunt bijsnijden of WordPress dit voor je kan laten doen.

Het is ook essentieel om de juiste plaatsen te vinden om WordPress achtergrondafbeeldingen te kopen of te lenen als je niet van plan bent om jouw eigen foto’s te maken.

Waar vind ik geschikte achtergrondafbeeldingen

Voor het zoeken naar achtergrondafbeeldingen, kun je onze gids over het vinden en toevoegen van stockfoto’s zonder WordPress te verlaten bekijken. We hebben ook een lijst met nuttige marktplaatsbronnen om stockfoto’s met een hoge resolutie te zoeken, waarvan vele gratis zijn.

Over het algemeen raden wij aan om te proberen zelf achtergrondafbeeldingen te maken. Als dat niet mogelijk is, of als je geen ervaring hebt met fotografie of grafisch ontwerp, kun je overwegen gratis stockfotografiebronnen te gebruiken. Je kunt er ook voor kiezen om te betalen voor een achtergrondafbeelding van een van de vele premium stockafbeeldingen websites, waarvan sommige een maandelijkse vergoeding vragen voor het downloaden van een stel foto’s.

Enkele hoogtepunten van deze links zijn:

• Unsplash – Gratis, en geen naamsvermelding vereist.
• Visual Hunt – Gratis foto’s. Voor de meeste afbeeldingen is geen bronvermelding nodig.
• Pexels – Gratis en geen bronvermelding nodig.
• Pixabay – Gratis en voor de meeste afbeeldingen is geen bronvermelding nodig.
• iStockphoto – Een vrij goedkoop premium abonnement voor royalty-vrije afbeeldingen.
• Shutterstock – Royalty-vrije afbeeldingen voor een redelijke abonnementsprijs.

Hoe de WordPress achtergrondafbeelding te veranderen met aangepaste CSS

Zoals we hebben geleerd, kun je een WordPress achtergrondafbeelding toevoegen met standaard ingebouwde WordPress tools of een plugin. Het maakt niet uit welke route je kiest, zolang je maar het gewenste resultaat krijgt. Er is ook de mogelijkheid om aangepaste CSS te gebruiken om de achtergrondafbeelding te stylen of helemaal aan jouw site toe te voegen.

We zullen niet ingaan op de fijne kneepjes van aangepaste CSS, aangezien elke achtergrondafbeelding en elk thema een ander proces zal hebben. We raden je echter aan onze gids over het bewerken, toevoegen en aanpassen van CSS in WordPress te lezen. Het artikel bevat nuttige tips voor het toevoegen van achtergrondafbeeldingen aan zowat elke website sectie, van menu-items tot specifieke pagina blokken.

Veelvoorkomende problemen met een WordPress achtergrondafbeelding oplossen

Alle WordPress sites worden geleverd met de mogelijkheid om een achtergrond toe te voegen. Dat betekent echter niet dat de kernfunctie voor alle websites werkt. Het kan bijvoorbeeld zijn dat het thema dat je gebruikt geen aangepaste achtergronden ondersteunt. Of misschien blijf je een achtergrond uploaden, maar ziet die er niet helemaal goed uit (te groot of te wazig).

Een probleem tegenkomen met een achtergrond in WordPress is frustrerend en komt helaas vaak voor. We hebben hieronder een aantal van de meest voorkomende problemen met achtergrondafbeeldingen op een rijtje gezet en de te volgen handelwijze in kaart gebracht.

Mijn thema ondersteunt geen WordPress achtergrondafbeelding

In WordPress hebben thema-ontwikkelaars de mogelijkheid om aangepaste achtergronden in of uit te schakelen. Ze kunnen deze aan- of uitzetten, afhankelijk van of ze de ondersteuning voor aangepaste achtergronden willen inschakelen. De achtergrond wordt uitgeschakeld wanneer deze niet nodig is, of wanneer deze conflicteert met het algemene ontwerp van het thema.

Als je merkt dat jouw thema geen aangepaste achtergrond ondersteunt of jouw mogelijkheden beperkt om een achtergrond toe te voegen, kun je de volgende oplossingen overwegen:

• Verwissel het thema voor een die wel aangepaste achtergronden ondersteunt. Zoek naar ‘aangepaste achtergronden’ (custom backgrounds) in de lijst met functies bij het kopen of downloaden van thema’s.
• Gebruik een achtergrondplugin om het blokkeren van de functie voor aangepaste achtergronden op te heffen.

Hoewel het mogelijk is om jouw eigen aangepaste codering op te nemen of in de themabestanden te gaan om aangepaste achtergronden te reageren, raden we meestal beide opties af. Je kunt het beste een thema zoeken dat achtergronden ondersteunt of een plugin toevoegen die achtergronden toestaat maar niet veel met de functionaliteit van het thema knoeit.

Mijn WordPress achtergrondafbeelding is te donker of heeft de verkeerde kleur

Een donkere achtergrondafbeelding kan het gevolg zijn van vele instellingen die naast de achtergrondafbeelding zelf lopen. Meestal heeft het te maken met een overlappende filter of een slecht gekleurde achtergrond.

In de meeste gevallen waar de achtergrond verkleurd is, moet je je thema of plugin controleren die de achtergrond regelt.

Zoek naar een instelling in de buurt van het achtergrondveld dat vraagt om een filter of overlay. Je kunt ook een doorzichtigheidsfunctie vinden die moet worden gewist, zodat je achtergrond goed wordt weergegeven.

Als al het andere mislukt, kan het zijn dat het thema een achtergrondfilter heeft die hard gecodeerd is in de themabestanden. In dat geval kun je contact opnemen met de ontwikkelaar van het thema om een idee te krijgen van wat er mogelijk is om de achtergrondkleur te corrigeren.

Mijn WordPress achtergrondafbeelding staat niet op de juiste plaats

Een achtergrondafbeelding die op de verkeerde plaats staat, heeft de neiging om het algemene ontwerp van jouw website te verstoren. Het kan zijn dat de achtergrond te ver naar links of rechts staat, of misschien verschijnt de centrale focus van de achtergrond helemaal niet op het scherm.

Gelukkig is het verplaatsen van de achtergrond maar een kwestie van een paar klikken op de knop.

Ga naar Appearance > Background in het WordPress dashboard. Zoek de afbeelding die je momenteel hebt geüpload als achtergrond en zoek naar het veld Position. In dit veld kun je de positie van de achtergrond wijzigen, met opties om deze naar links, rechts, boven, onder of hoeken te verplaatsen.

We raden aan op alle positioneringsknoppen te klikken om te zien welke resultaten ze opleveren. Nadat je de juiste positie hebt gevonden, sla je de pagina op.

Mijn WordPress achtergrondafbeelding wordt steeds herhaald

Texturen en effen achtergronden zien er vaak beter uit wanneer ze herhaald worden, omdat je vaak de afbeeldingsonderbrekingen niet kan zien. Veel normale afbeeldingen zien er echter vreselijk uit wanneer ze herhaaldelijk als achtergrond worden gebruikt, vooral als ze veel details en verschillende gradaties van kleur bevatten.

Een herhaalde achtergrondafbeelding layout is handig als je bronafbeelding niet groot genoeg is om de hele achtergrond te bedekken zonder er uitgerekt uit te zien. Daarom kiest WordPress soms standaard voor een herhaalde opmaak om de resolutie van de afbeelding te behouden.

De belangrijkste oplossing voor dit probleem is te vinden in de Background sectie bij Appearance > Background in WordPress. Als je een geüploade foto als achtergrond hebt, probeer dan presets zoals Fill Screen, Fit To Screen of Custom, in plaats van de Repeat preset optie.

Het kan echter voorkomen dat het proberen om een kleinere afbeelding het hele achtergrondscherm te laten bedekken tot onaangename resultaten leidt. In dat geval is de beste oplossing om de bronafbeelding van de achtergrond volledig te vervangen en er een te zoeken die groot en met een hoge resolutie is en klaar is om op het web te worden gepubliceerd.

Mijn WordPress achtergrondafbeelding is uitgerekt

Een uitgerekte achtergrondafbeelding betekent dat jouw aangepaste achtergrondinstellingen proberen om een kleinere afbeelding te nemen en het hele scherm te bedekken met de afbeelding.

Je kunt dit ook zien gebeuren met grotere, hoge-resolutie afbeeldingen als ze niet overeenkomen met de vereiste beeldverhouding. Voor uitgerekte achtergrondafbeeldingen, denk aan het bronbestand. Het kiezen van een andere afbeelding die wel geschikt is, is de beste optie.

Een ander probleem is dat de achtergrond instellingen misschien verkeerd zijn geconfigureerd. Controleer zaken als de positie van de achtergrondafbeelding en of deze is uitgerekt over het canvas in de modus Fill Screen. Misschien hoef je alleen maar de oorspronkelijke afmetingen aan te houden of een functie Repeat toe te voegen om het allemaal in orde te maken.

Andere achtergrond tips voor het oplossen van problemen

• Thema-ontwikkelaars hebben de volledige macht over de aangepaste achtergrondfunctie in WordPress. Als je een thema hebt geïnstalleerd en de achtergrond werkt niet, kun je het beste contact opnemen met de thema-ontwikkelaar of een nieuw thema installeren om te zien of dat het probleem oplost.
• Aangepaste achtergrondkleuren en -afbeeldingen overschrijven vaak alle aangepaste CSS code die je implementeert om de grootte, plaatsing of bron van jouw achtergrondafbeelding te regelen. Het kan zijn dat je het bij de achtergrond instellingen van het thema moet houden in plaats van aangepaste CSS te gebruiken.
• Een thema kan worden verkocht met een aangepaste achtergrond al geactiveerd. Meestal hoef je dan alleen de achtergrondafbeelding te vervangen door een nieuwe. Soms is het nodig om in de thema bestanden te tappen of aangepaste CSS te gebruiken om de thema instellingen te overschrijven.

Beste WordPress achtergrondafbeelding plugins

Als je verdere bewerkingsmogelijkheden voor een achtergrondafbeelding wilt hebben, geïnteresseerd bent in video achtergronden, of tools die pagina-specifieke achtergronden mogelijk maken, kun je de volgende WordPress achtergrondafbeelding plugins overwegen:

Simple Full Screen Background Image

De Simple Full Screen Background Image plugin verschilt niet veel van de standaard achtergrondafbeelding tool in WordPress, behalve dat het geautomatiseerde functies toevoegt voor dingen zoals resizing en scaling voor browsers.

In het algemeen werkt deze plugin het beste voor degenen die vinden dat hun thema de mogelijkheid om een achtergrond toe te voegen blokkeert, of misschien hebben ze problemen met de ingebouwde WordPress achtergrond tool. Het overschrijft wat je hebt op WordPress en voegt een speciale Background knop in jouw WordPress dashboard om direct een afbeelding te uploaden vanaf jouw computer.

Dat is alles wat erbij komt kijken!

De plugin heeft ook een Premium versie die verbeterde scaling biedt, ondersteuning voor een onbeperkt aantal achtergronden, unieke effecten, en nog veel meer.

Advanced WordPress Backgrounds

De Advanced WordPress Backgrounds plugin benadert WordPress achtergronden op een andere manier, door je in staat te stellen gebruik te maken van unieke effecten die je achtergrond opleuken. Een voorbeeld hiervan is de parallax achtergrond, die langzaam kan meebewegen met de gebruiker terwijl ze door jouw website scrollen.

De plugin biedt ook ondersteuning voor video’s. De video achtergronden worden gehaald van plaatsen zoals YouTube en Vimeo, of je kunt ze zelfs zelf hosten.

Het is ook mogelijk om een effen kleur of textuur achtergrond te hebben. Al deze achtergronden hebben geavanceerde functies die je niet kunt vinden met de basis WordPress achtergrond tool. Sommige van deze omvatten scrollen en scalingseffecten, ondoorzichtigheidseffecten en aangepaste snelheidsopties.

Het ondersteunt Gutenberg en kan samengaan met de standaard WordPress editor en vele andere visuele paginabouwers. Tot slot kun je zijn aangepaste CSS opties gebruiken om nog meer stijl aan jouw achtergronden toe te voegen.

Perfect Images + Retina

De Perfect Images + Retina plugin komt van pas als een twee-in-één oplossing. Het stelt je in staat om de WordPress achtergrondafbeelding grootte en uiterlijk te beheren, terwijl ook zorgt voor het regenereren van thumbnails en het vervangen van afbeeldingen. Het afbeeldingsbeheer is vrij indrukwekkend, en het is vooral van cruciaal belang voor hoge-resolutie achtergronden.

De plugin biedt ook een achtergrond functie als je voor de premium versie gaat. Het genereert een retina gelijkwaardige variant voor die achtergrondafbeelding, zodat de afbeeldingen eruitzien zoals ze eruit horen te zien, zelfs op hoge-resolutie beeldschermen.

Maintenance

Maintenance is een eenvoudige en makkelijk te gebruiken plugin voor het ontwerpen van onderhoud en Coming Soon pagina’s. De Maintenance plugin heeft zowel gratis als premium versies, maar de gratis versie is voldoende om een onderhoudspagina te activeren en een achtergrondafbeelding toe te voegen met overlappende tekst en velden.

Je kunt zelfs je eigen logo uploaden, dingen aanpassen zoals lettertypes en iconen, en verschillende templates kiezen met hun eigen prachtige achtergrondafbeeldingen. Je kunt ook de vele kant-en-klare templates installeren, maar voor de meeste heb je de premium licentie van de plugin nodig.

Samenvatting

Een basis WordPress achtergrondafbeelding toevoegen is zo gepiept en wordt meteen op jouw hele WordPress laten zien. Het is een functionaliteit die in de WordPress Core is ingebouwd, dus het is gemakkelijk om achtergronden voor bepaalde evenementen of feestdagen te verwisselen. Je kunt het ook bij één achtergrond voor het leven houden.

Naast de standaard WordPress achtergrond, kun je gebruik maken van aangepaste CSS code, plugins en paginabouwers om allerlei achtergronden op jouw WordPress site te implementeren. Van afbeeldingsachtergronden op specifieke pagina’s tot achtergronden voor je menuknop, de mogelijkheden zijn eindeloos.

Het is nu tijd om die achtergrond die je altijd al wilde aan je WordPress site toe te voegen.

Zijn we iets vergeten? Laat een reactie achter als je problemen hebt met het toevoegen of beheren van WordPress achtergrondafbeeldingen.