Hoe u een achtergrondafbeelding toevoegt in WordPress

6 min


110

Wil je een achtergrondafbeelding toevoegen aan je WordPress-site?

Achtergrondafbeeldingen kunnen worden gebruikt om uw website er aantrekkelijker en esthetisch aangenamer uit te laten zien.

In dit artikel laten we u zien hoe u eenvoudig een achtergrondafbeelding aan uw WordPress-site kunt toevoegen.

Hoe u een achtergrondafbeelding toevoegt in WordPress

Methode 1. Voeg een achtergrondafbeelding toe met uw WordPress-thema-instellingen

De meeste populaire WordPress-thema’s worden geleverd met aangepaste achtergrondondersteuning . Met deze functie kunt u eenvoudig een achtergrondafbeelding voor uw WordPress-site instellen.

Als uw thema de aangepaste achtergrondfunctie ondersteunt, raden we u aan deze methode te gebruiken om een ​​achtergrondafbeelding aan uw WordPress-site toe te voegen.

Als je thema deze functie echter niet ondersteunt, of als je het niet leuk vindt hoe het achtergrondafbeeldingen implementeert, dan kun je de andere opties proberen die in onze tutorial worden genoemd.

Ga eerst naar de pagina Uiterlijk »Aanpassen in uw WordPress-beheerder. Hiermee wordt de WordPress-thema-aanpasser gestart, waar u verschillende thema-instellingen kunt wijzigen terwijl u een live preview van uw website bekijkt.

Achtergrondafbeeldingoptie 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 Afbeelding selecteren om door te gaan.

Dit zal de pop-up van de WordPress media-uploader openen, waar je een afbeelding van je computer kunt uploaden. U kunt ook een eerder geüploade afbeelding uit de mediabibliotheek selecteren.

Upload achtergrondafbeelding

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

Hierdoor wordt de pop-up van de media-uploader gesloten en zie je het voorbeeld van je geselecteerde afbeelding in de thema-aanpasser.

Instellingen voor achtergrondafbeeldingen

Onder de afbeelding ziet u ook de opties voor achtergrondafbeeldingen. Onder ‘Voorinstelling’ kunt u selecteren hoe u de achtergrondafbeelding wilt weergeven: scherm vullen, scherm aanpassen, 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 bovenaan op de knop ‘Opslaan en publiceren’ te klikken om uw instellingen op te slaan. Dat is alles, je hebt met succes een achtergrondafbeelding aan je WordPress-site toegevoegd.

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

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

Deze methode is een stuk 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 elk bericht, pagina, categorie of elk ander gedeelte van uw WordPress-site.

Al uw achtergrondafbeeldingen worden automatisch op volledig scherm weergegeven en reageren op mobiele apparaten. Dit betekent dat uw achtergrondafbeelding automatisch het formaat van zichzelf zal wijzigen 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 u Uiterlijk »BG-afbeelding op volledig scherm bezoeken om de instellingen van de plug-in te configureren.

Volledig scherm achtergrond

U wordt gevraagd om uw licentiesleutel toe te voegen. U kunt deze informatie verkrijgen via de e-mail die u heeft ontvangen nadat u de plug-in heeft gekocht of via 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 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.

voeg een nieuwe achtergrondafbeelding toe

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 uw 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 instellen als een globale achtergrond, of u kunt kiezen uit verschillende secties van uw website, zoals categorieën, archieven, voorpagina of blogpagina.

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

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

Als u meer dan één afbeelding instelt om wereldwijd te worden gebruikt, begint de plug-in automatisch achtergrondafbeeldingen weer te geven als een diavoorstelling.

U kunt de tijd aanpassen die het duurt voordat een afbeelding vervaagt 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.

Achtergrondafbeeldingen voor berichten, pagina’s en categorieën

Met Full Screen Background Pro kunt u ook achtergrondafbeeldingen instellen voor afzonderlijke berichten, pagina’s, categorieën, tags en meer.

Bewerk gewoon de post / 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 een enkele post of pagina

Om een ​​achtergrondafbeelding voor een specifieke categorie te gebruiken, gaat u naar de pagina Uiterlijk »BG-afbeelding op volledig scherm en klikt u vervolgens op de knop ‘Nieuwe afbeelding toevoegen’.

Nadat u uw afbeelding heeft geüpload, kunt u ‘Categorie’ selecteren als de context waarin u de achtergrondafbeelding wilt weergeven.

Stel een achtergrondafbeelding in voor een specifieke categorie

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

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

Methode 3. Voeg achtergrondafbeeldingen toe met behulp van CSS Hero

CSS Hero is een WordPress-plug-in waarmee u wijzigingen in uw thema kunt aanbrengen zonder een enkele regel code aan te raken.

U kunt in een paar eenvoudige stappen snel achtergrondafbeeldingen toevoegen. Eerst moet u CSS Hero installeren en activeren . Als je dat eenmaal hebt gedaan, is het tijd om je website aan te passen.

Open nu uw startpagina in uw browser. U vindt de ‘Pas met CS Shero’ zie de link in je admin bar .

Achtergrondafbeelding met CSS Hero

Nadat je op die link hebt geklikt, zie je de CSS Hero-opties openen. Beweeg uw muis over het gebied waaraan u een afbeelding wilt toevoegen.

In de onderstaande schermafbeelding ziet u een .header-filter-gradientgebied. Wanneer u op dit gebied klikt, kunt u de achtergrondlink in de linkerzijbalk kiezen.

WordPress achtergrondafbeelding selector

De achtergrondlink wordt geopend. Van daaruit kunt u op ‘Afbeelding’ klikken. Nu kun je een afbeelding uit Unsplash of uit je uploads kiezen om je achtergrond te creëren.

Voeg afbeelding toe aan de achtergrond met CSS Her

Wanneer u op de gewenste afbeelding klikt, ziet u de knop ‘Afbeelding toepassen’. Vervolgens kun je kiezen welk formaat je afbeelding wilt hebben. We kozen voor de grote versie zodat deze zich over de pagina zou uitstrekken.

Klik onderaan op ‘Opslaan en publiceren’ en de achtergrondafbeelding is nu opgeslagen voor uw site.

Aangepaste achtergrondafbeelding WordPress

Methode 4. Voeg overal in WordPress aangepaste achtergrondafbeeldingen toe met behulp van CSS-code

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, auteurs 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 TV bekijkt.

1<body class="archive category category-tv category-4">

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 een van beide category-tvof category-4CSS-klassen gebruiken om alleen deze categoriepagina anders op te maken.

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

1234567body.category-tv { background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}

Vergeet niet om 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 de post- of pagina-ID in de body-tag. U kunt dezelfde CSS-code gebruiken, vervang gewoon .category-tv door de post-specifieke CSS-klasse.

We hopen dat dit artikel je heeft geholpen bij het leren toevoegen van een achtergrondafbeelding in WordPress.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format