Vill du lägga till en bakgrundsbild till din WordPress-webbplats?

Bakgrundsbilder kan användas för att göra din webbplats mer attraktiv och estetiskt tilltalande.

I den här artikeln visar vi hur du enkelt kan lägga till en bakgrundsbild till din WordPress-webbplats.

Fortsätt läsa om du föredrar de skriftliga instruktionerna.

Metod 1. Lägg till en bakgrundsbild med dina WordPress-temainställningar

den Mest populära WordPress-teman kommer med anpassat bakgrundsstöd. Med den här funktionen kan du enkelt ställa in en bakgrundsbild på din WordPress-webbplats.

Om din Wordpress tema stöder anpassad bakgrundsfunktion, rekommenderar vi att du använder den här metoden för att lägga till en bakgrundsbild på din webbplats.

Men om din Wordpress tema stöder inte den här funktionen, eller om du inte gillar hur den implementerar bakgrundsbilder, kan du prova de andra alternativen som nämns i vår handledning.

Du måste först besöka sidan Utseende »Anpassa i din WordPress-administratör. Detta kommer att starta Customizer Wordpress tema där du kan ändra olika inställningar för detta tema medan du tittar på en förhandsvisning i realtid.

Hur man lägger till bakgrundsbild wordpress blogpascher 1

Sedan måste du klicka på alternativet 'Bakgrundsbild'. Panelen glider ut och visar alternativen att ladda upp eller välja en bakgrundsbild till din webbplats.

Hur man lägger till bakgrundsbild wordpress blogpascher 2

Klicka på knappen Välj bild för att fortsätta.

Detta kommer att visa en WordPress-popup där du kan ladda upp en bild från din dator. Du kommer också att kunna välja en bild som tidigare hämtats från mediebiblioteket.

Hur man lägger till bakgrundsbild wordpress blogpascher 3

Sedan måste du klicka på knappen Välj bild efter uppladdning eller markera den bild du vill använda i bakgrunden.

Detta stänger popup-fönstret för medieuppladdaren och du ser förhandsgranskningen av din valda bild i WordPress-teman.

Hur man lägger till bakgrundsbild wordpress blogpascher 4

Under bilden kan du också se alternativen för bakgrundsbild. Under " FörinställaDu kan välja hur du vill att bakgrundsbilden ska visas: fyllningsskärm, anpassning till skärm, upprepa eller anpassad.

Du kan också välja bakgrundsbildens position genom att klicka på pilarna nedan. Genom att klicka på mitten justerar bilden bilden mot mitten av skärmen.

Glöm inte att klicka på knappen « offentliggöra För att lagra dina inställningar. Det är det, du har framgångsrikt lagt till en bakgrundsbild till din WordPress-webbplats.

Gå vidare och besök din webbplats för att se den i aktion.

Metod 2. Lägg till en anpassad bakgrundsbild i WordPress med hjälp av ett plugin

Denna metod är mycket mer flexibel. Det fungerar med vilket WordPress-tema som helst och låter dig konfigurera flera bakgrundsbilder.

Du kan också ställa in olika bakgrunder för alla inlägg, sidor, kategorier eller andra delar av din WordPress-webbplats.

Det gör automatiskt alla dina bakgrundsbilder i helskärm och lyhörd. Detta innebär att din bakgrundsbild automatiskt ändras på mindre enheter.

Först av allt måste du installera och aktivera plugin Full Screen Bakgrund Pro. För mer information, se vår steg-för-steg-guide hur man installerar ett WordPress-plugin.

Efter aktivering måste du besöka sidan Utseende »Helskärm BG-bild för att konfigurera insticksinställningarna.

Helskärmsbakgrund

Du kommer att bli ombedd att lägga till din licensnyckel. Du kan få denna information från e-postmeddelandet du fick efter att du köpte plugin-programmet eller från ditt konto på plugin-webbplatsen.

Då måste du klicka på 'Spara inställningarför att lagra dina ändringar. Du är nu redo att börja lägga till bakgrundsbilder till din WordPress-webbplats.

Gå vidare och klicka på knappen Lägg till ny bild På insticksidan för insticksprogrammet. Detta tar dig till skärmen för nedladdning av bakgrundsbilden.

lägg till ny bakgrundsbild

Klicka på knappen 'Välj bild'för att ladda ner eller välja en bild. Så snart du väljer bilden kommer du att kunna se en förhandsgranskning i realtid av bilden på din skärm.

Då måste du ange ett namn för den här bilden. Det här namnet kommer att användas internt så att du kan använda det var som helst.

Slutligen måste du välja var du vill att den här bilden ska användas som bakgrundsbild.

Full Screen Background Pro låter dig också ställa in bakgrundsbilder för hela webbplatsen, eller så kan du välja mellan olika delar av din webbplats som kategorier, arkiv, hemsida eller blogg.

Glöm inte att spara för att lagra din bakgrundsbild.

Du kan lägga till så många bilder du vill genom att besöka sidan Apparence »Helskärm BG-bild 

Om du definierar flera bilder som ska användas globalt visas plugin automatiquement bakgrundsbilder som ett bildspel.

Du kan justera den tid det tar för en bild att försvinna och tiden efter vilken en ny bakgrundsbild visas.

Bakgrundsfade in och fade ut inställningar

Tiden du anger här är i millisekunder. Om du vill att en bakgrundsbild ska blekna efter 20 sekunder måste du ange 20000 XNUMX.

Glöm inte att klicka på knappen Spara alternativ för att spara dina ändringar.

Bakgrundsbilder för inlägg, sidor och kategorier

Full Screen Background Pro låter dig också ställa in bakgrundsbilder för inlägg, sidor, kategorier, taggar och mer.

Redigera bara inlägget / sidan där du vill visa en annan bakgrundsbild. På artikelredigeringssidan kommer du att märka den nya gruppen " Helskärm bakgrundsbild »I artikelredigeraren.

Lägga till en bakgrundsbild för ett enskilt inlägg eller sida

För att använda en bakgrundsbild för en viss kategori måste du besöka sidan Utseende »Bakgrundsbild i helskärmsläge, klicka sedan på "Välj bild ".

Efter att du laddat upp din bild kan du välja "kategori" som det sammanhang där du vill visa bakgrundsbilden.

Ställ in bakgrundsbild för en viss kategori

Ange ID för den specifika kategorin eller snigeln där du vill visa bilden. 

Kom ihåg att spara din bild för att lagra dina inställningar.

Metod 3. Lägg till anpassade bakgrundsbilder var som helst i WordPress med CSS-kod

Som standard lägger WordPress till flera CSS-klasser till olika HTML-element på din WordPress-webbplats. Du kan enkelt lägga till anpassade bakgrundsbilder till inlägg, kategorier, författare och andra sidor med dessa WordPress-genererade CSS-klasser.

Om du till exempel har en kategori på din webbplats som heter TV, lägger WordPress automatiskt till dessa CSS-klasser i body-taggen när någon tittar på TV-kategorisidan.

 

Du kan använda inspektionsverktyg för att se exakt vilka CSS-klasser som läggs till av WordPress till body-taggen.

Använd inspektionsverktyget för att se klasser som lagts till av WordPress

Du kan använda endera CSS-klassen för att utforma denna kategorisida annorlunda. 

kategori-tvkategori-4

Låt oss lägga till en anpassad bakgrundsbild till en kategoris arkivsida. Du måste lägga till den här anpassade CSS till ditt WordPress-tema.

body.category-tv { 

bakgrundsbild: url ("http://exempel.com/wp-content/uploads/2017/03/your-background-image.jpg"); 

bakgrundsposition: centrumcentrum; 

bakgrundsstorlek: täcka; 

bakgrundsupprepning: ingen upprepning; 

bakgrundsbilaga: fast;

}
Kom ihåg att ersätta bakgrundsbildens URL och kategoriklass med din egen kategori.

Du kan också lägga till anpassade bakgrunder till enskilda inlägg och sidor. WordPress lägger till en CSS-klass med inlägget eller sid-ID i taggen. Du kan använda samma CSS-kod bara byt ut .category-tv med CSS-klassen för ett visst inlägg.

Upptäck också några premium WordPress-plugins  

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. Easy Custom JS och CSS 

Ce Wordpress plugin premium är en kraftfull CSS- och JavaScript-kodredigerare som låter dig lägga till dem i valfri del av din webbplats. Det låter dig behålla dina anpassningar även efter en större uppdatering av ditt WordPress-tema. Enkel anpassad js och css extra anpassning wordpress plugin

Du har möjlighet att begränsa användningsområdet för din personliga kod. Du kan till exempel bara använda din kod för en artikel med videoformat.

Se våra artiklar om Hur man kräver godkännande av användarvillkoren på WordPress

Eller så kan du begränsa din kod till ett specifikt WordPress-tema; Vilket är praktiskt om du för närvarande ändrar teman för din WordPress-blogg.

Ladda ner | demo | webbhotell

2. Gul penna: Visual CSS Style Editor

Yellow Pencil är en visuell stilredigerare som du kan använda med vilket tema som helst för att anpassa din webbplats på några minuter (teckensnitt, färger, animationer och mer ...).Yellowpencil Visual CSS Style Editor plugin wordpress

Ce Wordpress plugin premium kommer att skapa CSS-stilar av bakgrund medan du spelar med färgerna som om det var ett spel. Det var designat för både nybörjare och erfarna användare.

Upptäck också vår 5-plugins Wordpress för att visa aviseringar

Inga kodkunskaper krävs. Men den Wordpress plugin har en bra CSS-editor för de som gillar att koda. Du kan koda live med denna editor och anpassa din CSS.

Ladda ner | demo | webbhotell

3. Facebooks senaste kommentarwidget 

Med den här widgeten kan du visa en lista över de senaste Facebook-kommentarerna från din WordPress-blogg på första sidan, eller var som helst det finns en widget som används av webbplatsen.

Facebook senaste kommentarer wordpress widget wordpress plugin för facebook kommentarer

Som funktioner har du bland annat: visning av alla de senaste kommentarerna på din webbplats eller WordPress-blogg,Automatiskt eller manuellt godkännande av kommentarer som ska visas på widgeten,skicka ett e-postmeddelande när en person kommenterar via insticksprogrammet för Facebook, bra SEO, kompatibilitet med något WordPress-tema, oalternativ för att anpassa widgeten och mycket mer.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Här! Det är det för denna handledning. Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till en bakgrundsbild i WordPress. Tveka inte att dela med dina vänner på dina favorit sociala nätverk

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blog skapelse.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.