Hoe een achtergrondafbeelding toe te voegen in WordPress

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


Hoe een achtergrondafbeelding toe te voegen in WordPress

Video-instructies

Abonneer u op WPBeginner

Als je de video niet leuk vindt of meer instructies nodig hebt, lees dan verder.

Methode 1. Voeg een achtergrondafbeelding toe met 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 voor uw WordPress-site.

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

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

Achtergrondafbeelding optie in WordPress thema-aanpasser

Vervolgens moet u op de optie ‘Achtergrondafbeelding’ klikken. Het paneel schuift naar binnen en toont u de opties om een ​​achtergrondafbeelding voor uw website te uploaden of te selecteren.

Selecteer achtergrondafbeelding

Klik op de knop voor het selecteren van afbeeldingen om door te gaan.

Hiermee wordt de WordPress-uploader-pop-up voor media geopend, waar u een afbeelding van uw computer kunt uploaden. U kunt ook een eerder geüploade afbeelding uit de mediabibliotheek selecteren.

Achtergrondafbeelding uploaden

Vervolgens moet u op de knop voor het kiezen van een afbeelding klikken na het uploaden of het selecteren van de afbeelding die u als achtergrond wilt gebruiken.

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

Instellingen achtergrondafbeelding

Onder de afbeelding ziet u ook de opties voor de achtergrondafbeelding. Onder voorinstelling kunt u selecteren hoe u de achtergrondafbeelding wilt weergeven: scherm vullen, scherm passen, herhalen of aangepast.

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

Vergeet niet op ‘Opslaan’ te klikken & Publiceer de knop bovenaan om uw instellingen op te slaan. Dat is alles, u heeft met succes een achtergrondafbeelding aan uw WordPress-site toegevoegd.

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

Methode 2. Voeg een aangepaste achtergrondafbeelding toe in WordPress met behulp van de plug-in

Deze methode is veel flexibeler. Het werkt met elk WordPress-thema en stelt u in staat meerdere achtergrondafbeeldingen in te stellen. Je kunt ook verschillende achtergronden instellen voor elk bericht, elke pagina, categorie of elk ander gedeelte van je WordPress-site.

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

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

Na activering moet je bezoeken Uiterlijk »BG-afbeelding op volledig scherm pagina om de plugin-instellingen te configureren.

Volledig scherm achtergrond

U wordt gevraagd om uw licentiesleutel toe te voegen. U kunt deze informatie ophalen uit de e-mail die u heeft ontvangen na het kopen van de plug-in of uit uw 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 te beginnen met het toevoegen van achtergrondafbeeldingen aan uw WordPress-site.

Ga je gang en klik op de knop ‘Nieuwe afbeelding toevoegen’ op de instellingenpagina van de plug-in. Dit brengt u naar het uploadscherm voor de achtergrondafbeelding.

nieuwe achtergrondafbeelding toevoegen

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

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 u deze afbeelding wilt gebruiken als achtergrondpagina. Met Full Screen Background Pro kunt u afbeeldingen als achtergrond wereldwijd 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 je achtergrondafbeelding op te slaan.

U kunt zoveel afbeeldingen toevoegen als u wilt door naar te gaan Uiterlijk »BG-afbeelding op volledig scherm bladzijde.

Als u meer dan één afbeelding instelt om wereldwijd te gebruiken, zal de plug-in automatisch achtergrondafbeeldingen als diavoorstelling weergeven.

U kunt de tijd aanpassen die nodig is om een ​​afbeelding te laten vervagen en de tijd waarna een nieuwe achtergrondafbeelding begint te vervagen.

Achtergrond fade-in en fade-out instellingen

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 op de knop Instellingen opslaan te klikken om uw wijzigingen op te slaan.

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

Met Full Screen Background Pro kunt u ook achtergrondafbeeldingen instellen voor afzonderlijke berichten, pagina’s, categorie, tag, enz.

Bewerk gewoon het bericht / de pagina waar u een andere achtergrondafbeelding wilt weergeven. Op het berichtbewerkingsscherm ziet u het nieuwe vak ‘Achtergrondafbeelding op volledig scherm’ onder de berichteditor.

Een achtergrondafbeelding toevoegen voor één bericht of pagina

Om een ​​achtergrondafbeelding voor een specifieke categorie te gebruiken, moet je bezoeken Uiterlijk »BG-afbeelding op volledig scherm pagina en klik vervolgens op de knop ‘Nieuwe afbeelding toevoegen’.

Nadat je je afbeelding hebt geüpload, kun je ‘Categorie’ selecteren als de context waarin je de achtergrondafbeelding wilt weergeven.

Achtergrondafbeelding instellen voor een specifieke categorie

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

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

Methode 3. Voeg overal aangepaste achtergrondafbeeldingen toe in WordPress met behulp van CSS

Standaard voegt WordPress verschillende CSS-klassen toe aan verschillende HTML-elementen op uw WordPress-site. U kunt eenvoudig aangepaste achtergrondafbeeldingen toevoegen aan individuele 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 heeft met de naam TV, dan voegt WordPress deze CSS-klassen automatisch toe aan de body-tag wanneer iemand de categoriepagina van de tv bekijkt.

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

Gebruik de inspectietool om klassen te zien die door WordPress zijn toegevoegd

U kunt categorie-tv of categorie-4 CSS-klasse gebruiken om alleen deze categoriepagina anders te stylen.

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

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

Vergeet niet de URL van de achtergrondafbeelding en de categorieklasse te vervangen door uw eigen categorie.

U kunt ook aangepaste achtergronden toevoegen aan individuele berichten en pagina’s. WordPress voegt een CSS-klasse toe met het bericht of de 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 je heeft geholpen om te leren hoe je een achtergrondafbeelding toevoegt in WordPress. Misschien wilt u ook onze lijst met uiterst nuttige trucs voor het bestand met WordPress-functies bekijken.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map