Hur man lägger till en bakgrundsbild i WordPress (6 enkla sätt)

Bakgrundsbilder kan helt förändra hur din WordPress-webbplats ser ut och känns. Men sträckta bilder, felaktig justering eller problem med filstorleken kan komma i vägen. Särskilt om du inte är säker på vilken metod du ska använda.

Från vår erfarenhet av att hantera dussintals WordPress-webbplatser har vi lärt oss att de flesta gör den här processen mycket svårare än vad den behöver vara.

De goda nyheterna är att WordPress erbjuder flera inbyggda alternativ för att lägga till bakgrundsbilder, plus att det finns utmärkta plugins som gör det ännu enklare. När du väl känner till rätt metoder kan du lägga till vackra bakgrunder på hela din webbplats, enskilda sidor eller specifika sektioner med bara några klick.

I den här guiden visar vi dig 5 pålitliga sätt att lägga till bakgrundsbilder i WordPress som fungerar för alla kunskapsnivåer. 🎨

Varför lägga till en bakgrundsbild i WordPress?

Att lägga till en bild på din WordPress-webbplats kan göra den mer attraktiv för besökare. Du kan snabbt fånga användarnas uppmärksamhet och engagera dem med ditt innehåll.

Det låter dig också anpassa din webbplatsdesign enligt ditt varumärke. Du kan till exempel ladda upp subtila foton av dina produkter eller varumärkesmaskot i bakgrunden.

Dessutom kan du lägga till en YouTube-video som en hel bakgrund eller ett bildspel som kommer att ge ditt innehåll liv.

Vi rekommenderar dock att du väljer bakgrundsbilder som inte är distraherande eller gör det svårt att läsa innehållet på din WordPress-blogg. En bakgrund bör förbättra användarupplevelsen och hjälpa till att leverera ditt budskap till besökare.

Dessutom är det viktigt att välja en bakgrundsbild som är mobilvänlig och inte påverkar din webbplatshastighet. Annars kommer det att skada din WordPress SEO.

I den här artikeln delar vi med oss av olika sätt att lägga till en WordPress-bakgrundsbild.

Vi kommer att täcka flera metoder, inklusive WordPress temaanpassare, fullständig webbplatsredigerare, plugin, temabyggare och mer. Klicka bara på länken nedan för att hoppa till din föredragna sektion:

• Metod 1. Lägg till en bakgrundsbild med din WordPress-temaanpassare
• Metod 2. Lägg till en anpassad bakgrundsbild med Full Site Editor
• Metod 3. Lägg till en bakgrundsbild med WordPress Theme Builder
• Metod 4. Lägg till en bakgrundsbild med CSS Hero
• Metod 5. Lägg till anpassade bakgrundsbilder var som helst i WordPress med CSS-kod
• Bonusresurser: Bild- och mediefilsguider för att förbättra WordPress-webbplatsens UX

Redo? Låt oss börja.

Metod 1. Lägg till en bakgrundsbild med din WordPress-temaanpassare

De flesta populära WordPress-teman kommer med stöd för anpassad bakgrund. Den här funktionen gör att du enkelt kan ställa in en bakgrundsbild. Vi rekommenderar den här metoden om ditt tema stöder den.

Men om ditt alternativ för anpassningsmeny saknas, kan ditt tema ha fullständig webbplatsredigering aktiverad. I nästa avsnitt kommer vi att täcka hur du använder redigeraren för hela webbplatsen för att ändra din bakgrundsbild.

Under tiden, för att använda 'Anpassa', måste du besöka sidan Utseende » Anpassa i din WordPress-admin.

Detta startar WordPress temaanpassare, som låter dig ändra olika temainställningar samtidigt som du ser en liveförhandsgranskning av din webbplats.

Observera att alternativen du ser kommer att variera beroende på WordPress-tema du använder. I den här handledningen använder vi Sydney-temat.

Om du använder ett annat tema kan du behöva slå upp det temats dokumentation. Om du inte kan hitta en bakgrundsbild i anpassaren kan du också kontakta temautvecklaren för att ta reda på hur du lägger till en.

I Sydney-temats anpassningsalternativ måste du klicka på 'Allmänt' i panelen till vänster.

När du har gjort det ser du olika 'Allmänna' alternativ för att anpassa ditt Sydney-tema.

Vid det här laget behöver du klicka på sektionen 'Bakgrundsbild'.

På nästa skärm ser du alternativet att lägga till din bakgrundsbild.

Klicka på knappen 'Välj bild'.

Detta öppnar WordPress mediebibliotek.

Här kan du ladda upp en bild från din dator eller välja en du tidigare har laddat upp.

När du har valt bilden för din bakgrund måste du klicka på knappen 'Välj'.

Detta stänger mediepopupen, och du kommer att se en förhandsgranskning av din valda bakgrundsbild i temaanpassaren.

I panelen till vänster kan du justera bildens position (överst, mitten, nederst, vänster, höger) för att styra hur den visas i bakgrunden. Du kan också ändra storlek på den med hjälp av rullgardinsmenyn 'Bildstorlek' för att passa, fylla eller täcka området.

Om du vill att bilden ska upprepas över bakgrunden, markera rutan som säger 'Upprepa bakgrundsbild'. Du kan också få bilden att rulla med sidinnehållet genom att markera rutan 'Rulla med sidan'.

När du är nöjd med hur det ser ut, klicka på knappen 'Publicera' högst upp för att spara dina inställningar.

Det var allt. Du har framgångsrikt lagt till en bakgrundsbild på 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 med Full Site Editor

Om du använder ett blockbaserat WordPress-tema, kan du lägga till en anpassad bakgrundsbild med hjälp av redigeraren för hela webbplatsen (FSE).

Med redigeraren för hela webbplatsen kan du redigera din webbplatsdesign med hjälp av block. Det är precis som att redigera ett blogginlägg eller en sida med hjälp av WordPress blockredigerare.

För den här handledningen använder vi standardtemat ‘Twenty Twenty-Two’. För att starta redigeraren för hela webbplatsen, gå helt enkelt till Utseende » Redigerare från ditt WordPress-adminområde.

När du är i redigeraren för hela webbplatsen måste du lägga till ett 'Omslag'-block i din mall för att ladda upp en bakgrundsbild.

Klicka helt enkelt på '+' -tecknet högst upp och lägg till ett 'Omslag'-block.

För att lägga till en bakgrundsbild i blocket 'Omslag', klicka på knappen 'Ladda upp' eller 'Mediebibliotek'.

Detta öppnar popup-fönstret för WordPress medieuppladdare.

Nästa steg är att välja en bild som du vill använda som webbplatsbakgrund.

När du har valt bilden klickar du helt enkelt på knappen 'Välj'.

När bilden har lagts till i blocket 'Omslag' måste du ställa in den som bakgrund för sidan.

För att göra det, klicka helt enkelt på ikonen ‘Listvy’ högst upp (ikon med 3 streck). Detta öppnar en översiktsvyn av temaelement, såsom webbplatsens sidhuvud och sidfot.

Därefter, dra och släpp helt enkelt alla mallens element under blocket ‘Omslag’ i listvyn.

När de alla är där under kommer 'Omslag'-blockets bild att visas som webbplatsens bakgrund.

Därefter kan du justera bakgrundsbilden genom att klicka på blocket 'Omslag' och välja kugghjulsikonen i det övre högra hörnet av skärmen. Detta öppnar inställningspanelen 'Block'.

Här hittar du alternativ för att göra bilden till en fast bakgrund, justera dess överlägg, redigera färgen och mer.

När du är klar, glöm inte att klicka på knappen 'Spara'.

Och det var allt! Du har framgångsrikt lagt till en bakgrundsbild med hjälp av fullständig webbplatsredigerare.

Metod 3. Lägg till en bakgrundsbild med WordPress Theme Builder

Ett annat sätt att lägga till anpassade bakgrundsbilder på din webbplats är att använda en WordPress-temabyggare som SeedProd. Det är det bästa WordPress-pluginet för landningssidor med dra-och-släpp-funktionalitet som låter dig enkelt anpassa din webbplatsdesign utan att röra en enda kodrad.

Vi använder också SeedProd på några av våra varumärkessidor, och det har fungerat riktigt bra. För mer information om vår erfarenhet kan du läsa vår omfattande SeedProd-recension.

För den här handledningen använder vi SeedProd Pro-versionen eftersom den inkluderar temabyggaren. Det finns också en SeedProd Lite-version som du kan prova gratis.

Först måste du installera och aktivera SeedProd-pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Vid aktivering ser du SeedProd-välkomstskärmen i din WordPress-instrumentpanel.

Därefter vill du ange din licensnyckel och klicka på knappen 'Verifiera nyckel' för att aktivera pluginets pro-version. Du hittar din licensnyckel i ditt SeedProd-konto.

När allt är inställt måste du gå till SeedProd » Temabyggare i ditt WordPress adminpanel.

Klicka på knappen 'Teman' högst upp.

SeedProd kommer nu att erbjuda flera temamallar att välja mellan.

Du kan sväva över och klicka på vilken mall du vill använda. För den här handledningen använder vi mallen för temat ‘Starter’.

Härifrån kommer SeedProd att generera olika mallar som startsidan, enskilda inlägg, enskilda sidor, sidofältet, sidhuvudet och mer.

För att lägga till en bakgrundsbild som visas på hela webbplatsen och på alla temamallar, klickar du på alternativet 'Redigera design' under Global CSS.

På nästa skärm ser du globala CSS-inställningar som du kan ändra.

Klicka helt enkelt på alternativet 'Bakgrund' för att börja anpassa.

Efter det ser du alternativen för 'Bakgrundsbild'.

Klicka på ‘Använd din egen bild’ för att ladda upp din bild. Alternativt kan du klicka på knappen ‘Använd en lagerbild’ för att söka efter en lagerbild att använda som din webbplatsbakgrund.

När du har lagt till en bakgrundsbild kommer SeedProd-byggaren att visa en liveförhandsgranskning.

Du kan justera bakgrundspositionen vid behov. Du kan också välja om du vill använda helskärmstäckning eller upprepa den, bland andra alternativ.

Dessutom kan du redigera bakgrundsbildens mörkningsnivå genom att flytta reglaget 'Dimma bakgrund'. Ju högre värde, desto mörkare blir bilden.

När du är klar med att redigera bakgrundsbilden, klickar du helt enkelt på knappen 'Spara' högst upp och stänger inställningarna för Global CSS.

Om du vill lägga till en anpassad bakgrundsbild för olika delar av din webbplats kan du redigera dessa enskilda temamallar i SeedProd. För mer information, se gärna vår guide om hur man enkelt skapar ett anpassat WordPress-tema.

Metod 4. Lägg till en bakgrundsbild med CSS Hero

CSS Hero är ett WordPress-plugin som låter dig göra alla ändringar i ditt tema utan kodning.

Du kan lägga till bakgrundsbilder snabbt i några enkla steg. Men först måste du installera och aktivera CSS Hero. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

När du har gjort det kan du börja anpassa din webbplats.

Det första du behöver göra är att öppna din startsida i din webbläsare. Där ser du länken 'Anpassa med CSS Hero' i din admin-fält.

Klicka helt enkelt på länken, så ser du CSS Hero-alternativen öppnas.

När du är inne, måste du föra muspekaren över det område där du vill lägga till en bild. Klicka sedan på området för att komma åt alternativet ‘Bakgrund’ i sidofältet till vänster.

Klicka på 'Bakgrund' för att se inställningarna för att lägga till en bild.

Därifrån klickar du helt enkelt på 'Bild'.

Sedan kan du välja en bild från Unsplash eller ladda upp din egen för att skapa din bakgrund.

När du klickar på bilden du vill ha, ser du knappen ‘Använd bild’.

Sedan kanske du vill välja vilken storlek du vill att din bild ska ha. Vi rekommenderar att du väljer den stora versionen så att den sträcker sig över sidan.

Slutligen kan du klicka på 'Spara och publicera' längst ner för att spara bakgrundsbilden för din webbplats.

Metod 5. 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. Så du kan enkelt lägga till anpassade bakgrundsbilder till enskilda inlägg, kategorier, författare och andra sidor med hjälp av dessa WordPress-genererade CSS-klasser.

Till exempel, om du har en kategori på din webbplats som heter TV, kommer WordPress automatiskt att lägga till dessa CSS-klasser till body-taggen när någon visar TV-kategorisidan.

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

Du kan använda inspektionsverktyget för att se vilka CSS-klasser WordPress lägger till i body-taggen. Här är ett exempel:

Du kan använda antingen CSS-klassen category-tv eller category-4 för att styla just den här kategorisidan annorlunda.

Låt oss till exempel lägga till en anpassad bakgrundsbild på arkivsidan för kategorin.

Även om det är praxis att modifiera en temas functions.php-fil för att lägga till CSS-kod, är det osäkert och inte särskilt nybörjarvänligt. Ett litet misstag och du riskerar att bryta din webbplats.

Det är därför vi alltid rekommenderar att använda WPCode istället. Det är det bästa pluginet för att lägga till anpassade kodavsnitt utan mycket krångel.

Vi använder WPCode för att lägga till och hantera kodavsnitt över våra varumärken. Det har varit ett enkelt och effektivt sätt att hålla ordning och se till att allt fungerar smidigt. Om du vill veta mer, kolla in vår detaljerade WPCode-recension.

För att göra detta, låt oss installera och aktivera pluginet WPCode. Om du behöver hjälp kan du ta en titt på vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, navigera helt enkelt till Kodutdrag » + Lägg till nytt från ditt WordPress-adminområde.

På nästa skärm vill du sväva över alternativet 'Lägg till din anpassade kod (nytt utdrag)' och klicka på knappen 'Använd utdrag' när den visas.

På nästa skärm kan du börja med att lägga till en titel för ditt anpassade CSS-utdrag. Du kanske vill välja något enkelt och relevant, eftersom detta hjälper dig att känna igen koden senare.

Därefter kan du skriva eller klistra in följande anpassade CSS i rutan 'Kodförhandsgranskning'.

body.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;
}

Glöm inte att ersätta URL:en för bakgrundsbilden och kategoriklassen med de från din egen webbplats.

Här är hur det kan se ut i WPCode-redigeraren:

Du måste sedan ställa in 'Kodtyp' genom att välja 'CSS-utdrag' från rullgardinsmenyn.

När allt ser bra ut kan du växla reglaget för att aktivera kodavsnittet och klicka på 'Spara kodavsnitt'.

Dessutom kan du lägga till egna bakgrunder för enskilda inlägg och sidor.

WordPress har en CSS-klass med inläggets eller sidans ID i body-taggen. Du kan använda samma CSS-kod och bara ersätta .category-tv med den inläggsspecifika CSS-klassen.

För mer information, se vår handledning om hur man lägger till anpassad CSS i WordPress.

Bonusresurser: Bild- och mediefilsguider för att förbättra WordPress-webbplatsens UX

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en bakgrundsbild i WordPress. Du kanske också vill se vår guide om:

• Hur man lägger till bilder korrekt i WordPress
• Hur man skapar ett bildgalleri i WordPress
• Hur man skapar en video- och bildrutschkana i WordPress
• Hur man lägger till miniatyrbilder till länkar för föregående och nästa inlägg i WordPress
• Hur man bäddar in Spotify i WordPress
• Hur man bäddar in Apple Podcasts i WordPress
• Den bästa programvaran för webbdesign
• Hur man optimerar bilder för webbprestanda utan att förlora kvalitet

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.