Hoe een achtergrondafbeelding in WordPress toe te voegen

Wilt u een achtergrondafbeelding toevoegen aan uw WordPress-site? Achtergrondafbeeldingen kunnen worden gebruikt om uw website aantrekkelijker en esthetisch aangenamer te maken. In dit artikel laten we u zien hoe u eenvoudig een achtergrondafbeelding kunt toevoegen aan uw WordPress-site.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Methode 1. Een achtergrondafbeelding toevoegen met behulp van uw WordPress-thema-instellingen

De meeste gratis en premium WordPress-thema's worden geleverd met aangepaste achtergrondondersteuning. Met deze functie kunt u eenvoudig een achtergrondafbeelding instellen op uw WordPress-site.

Als uw thema een aangepaste achtergrondfunctie ondersteunt, raden we u aan deze methode te gebruiken om een ​​achtergrondafbeelding toe te voegen aan uw WordPress-site. Als uw thema echter geen aangepaste achtergrondfunctie ondersteunt, kunt u andere methoden in dit artikel gebruiken.

Eerst moet je de Uiterlijk »Aanpassen pagina in uw WordPress-beheerder. Hiermee wordt de WordPress-thema-aanpasser gestart, waar u verschillende thema-instellingen kunt wijzigen terwijl u een live voorvertoning van uw website bekijkt.

Vervolgens moet u op de optie 'Achtergrondafbeelding' klikken. Het paneel wordt geopend en toont de opties om een ​​achtergrondafbeelding voor uw website te uploaden of te selecteren.

Klik op de knop Selecteer afbeelding om verder te gaan.

Hiermee wordt de uploaderpop-up voor WordPress-media weergegeven, waarin u een afbeelding vanaf uw computer kunt uploaden. U kunt ook een eerder geüploade afbeelding uit de mediabibliotheek selecteren.

Vervolgens moet je klikken op de knop Afbeelding kiezen nadat je hebt geüpload of de afbeelding hebt geselecteerd die je als achtergrond wilt gebruiken.

Hiermee wordt het pop-upvenster met de media-uploader gesloten en ziet u het voorbeeld van uw geselecteerde afbeelding in de thema-aanpasser.

Onder de afbeelding ziet u ook de achtergrondafbeeldingsopties. Onder preset kunt u selecteren hoe de achtergrondafbeelding moet worden weergegeven: vulscherm, scherm aanpassen, herhalen of aangepast.

U kunt ook de positie van de achtergrond selecteren door op de onderstaande pijlen te klikken. Als u op centre klikt, wordt de afbeelding uitgelijnd met het midden van het scherm.

Vergeet niet om bovenaan op de knop 'Save & Publish' te klikken om uw instellingen op te slaan. Dat is alles, je hebt met succes een achtergrondafbeelding toegevoegd aan je WordPress-site.

Ga je gang en bezoek je website om deze in actie te zien.

Methode 2. Aangepaste achtergrondafbeelding toevoegen in WordPress Plugin gebruiken

Deze methode is veel flexibeler. Het werkt met elk WordPress-thema en stelt u in staat om meerdere achtergrondafbeeldingen in te stellen. U kunt ook verschillende achtergronden instellen voor elke post, pagina, categorie of andere sectie van uw WordPress-site.

Het maakt automatisch al uw achtergrondafbeeldingen op volledig scherm en reageert op mobiele apparaten. Dit betekent dat uw achtergrondafbeelding zichzelf automatisch verkleint op kleinere apparaten.

Eerst moet je de Full Screen Background Pro-plug-in installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Bij activering moet je bezoeken Uiterlijk »Volledig scherm BG-afbeelding pagina om de plug-in-instellingen te configureren.

U wordt gevraagd om uw licentiesleutel toe te voegen. Je kunt deze informatie krijgen van de e-mail die je hebt ontvangen na het kopen van de plug-in of van je account op de website van de plug-in.

Vervolgens moet u op de knop Instellingen opslaan klikken om uw wijzigingen op te slaan. U bent nu klaar om achtergrondafbeeldingen toe te voegen aan uw WordPress-site.

Ga je gang en klik op de knop 'Nieuwe afbeelding toevoegen' op de instellingenpagina van de plug-in. Hiermee gaat u naar het uploadscherm voor achtergrondafbeeldingen.

Klik op de knop Afbeelding kiezen om een ​​afbeelding te uploaden of te selecteren. Zodra u de afbeelding selecteert, kunt u een live voorvertoning van de afbeelding op het scherm bekijken.

Vervolgens moet u een naam voor deze afbeelding opgeven. Deze naam wordt intern gebruikt, dus u kunt hier alles gebruiken.

Ten slotte moet u selecteren waar deze afbeelding moet worden gebruikt als achtergrondpagina. Volledig scherm Met Achtergrond Pro kunt u afbeeldingen globaal als achtergrond instellen, of u kunt kiezen uit verschillende secties van uw website, zoals categorieën, archieven, voorpagina, blogpagina, enz..

Vergeet niet op de knop Afbeelding opslaan te klikken om uw achtergrondafbeelding op te slaan.

Je kunt zoveel foto's toevoegen als je wilt door het te bezoeken Uiterlijk »Volledig scherm BG-afbeelding pagina.

Als u meer dan één afbeelding instelt die globaal moet worden gebruikt, zal de plug-in automatisch achtergrondafbeeldingen als diavoorstelling weergeven.

U kunt de tijd aanpassen die nodig is om een ​​afbeelding uit te faden en de tijd waarna een nieuwe achtergrond begint te vervagen.

De tijd die u hier invoert, is in milliseconden. Als u wilt dat een achtergrondafbeelding na 20 seconden vervaagt, moet u 20000 invoeren.

Vergeet niet te klikken op de knop Instellingen opslaan om uw wijzigingen op te slaan.

Achtergrondafbeelding instellen voor individuele berichten, pagina's, categorieën, enz

Volledig scherm Met Achtergrond Pro kunt u achtergrondafbeeldingen instellen voor afzonderlijke berichten, pagina's, categorie, tag, enz.

Bewerk gewoon de post / pagina waar u een andere achtergrondafbeelding wilt weergeven. In het berichtbewerkingsscherm zul je het nieuwe 'Full Screen Background Image' venster onder de berichteditor opmerken.

Als u een achtergrondafbeelding voor een specifieke categorie wilt gebruiken, moet u deze bezoeken Uiterlijk »Volledig scherm BG-afbeelding pagina en klik vervolgens op de knop 'Nieuwe afbeelding toevoegen'.

Na het uploaden van uw afbeelding, kunt u 'Categorie' selecteren als de context waar u de achtergrondafbeelding wilt weergeven.

Voer nu de specifieke categorie-ID of slak in waar u de afbeelding wilt weergeven. Zie onze gids over het vinden van categorie-ID in WordPress.

Vergeet niet om uw afbeelding op te slaan om uw instellingen op te slaan.

Methode 3. Aangepaste achtergrondafbeeldingen overal toevoegen in WordPress CSS gebruiken

WordPress voegt standaard verschillende CSS-klassen toe aan verschillende HTML-elementen op uw WordPress-site. U kunt eenvoudig aangepaste achtergrondafbeeldingen toevoegen aan afzonderlijke berichten, categorieën, auteur en andere pagina's met behulp van deze door WordPress gegenereerde CSS-klassen.

Als u bijvoorbeeld een categorie op uw website hebt die tv heet, dan voegt WordPress deze CSS-klassen automatisch toe aan de body-tag wanneer iemand de tv-categoriepagina bekijkt.

U kunt het inspecteertool gebruiken om precies te zien welke CSS-klassen door WordPress aan de body-tag worden toegevoegd.

Je kunt een van beide gebruiken categorie-tv of categorie-4 CSS-klasse om deze categoriepagina anders te stijlen.

Laten we een aangepaste achtergrondafbeelding toevoegen aan een categoriearchiefpagina. U moet deze aangepaste CSS toevoegen aan uw thema.

 body.category-tv background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); achtergrond-positie: middelpunt; achtergrondformaat: omslag; achtergrondherhaling: geen herhaling; achtergrond-bijlage: vast;  

Vergeet niet om de URL van de achtergrondafbeelding en de categorie met uw eigen categorie te vervangen.

U kunt ook aangepaste achtergronden toevoegen aan individuele berichten en pagina's. WordPress voegt een CSS-klasse toe met de post- of pagina-ID in de body-tag. U kunt dezelfde CSS-code gebruiken. Vervang gewoon .category-tv door de postspecifieke CSS-klasse.

We hopen dat dit artikel u heeft geholpen om te leren hoe u een achtergrondafbeelding kunt toevoegen in WordPress. Misschien wilt u ook onze lijst met uiterst nuttige trucs voor het WordPress-functiesbestand bekijken.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.