Hur man lägger till en bakgrundsbild i WordPress

Undrar du hur du lägger till en bakgrundsbild på din WordPress-webbplats?

Bakgrundsbilder kan användas på en mängd olika webbplatser för att göra dem mer engagerande och förbättra webbplatsens design.

Vi går igenom steg för steg hur du enkelt lägger till en bakgrundsbild på din WordPress-webbplats.

Innehållsförteckning

1. Lägg till en bakgrundsbild via WordPress temainställningar

De flesta WordPress-teman erbjuder stöd för anpassade bakgrunder. Det betyder att du enkelt kan ändra bakgrundsbilden på din WordPress-webbplats.

Detta är förmodligen det enklaste sättet att lägga till en bakgrund, så om ditt WordPress-tema stöder detta kan du fortsätta med denna metod.

Om ditt tema inte erbjuder den här funktionen har vi många andra metoder som du kan använda nedan.

Navigera till Appearance > Customize i din WordPress-administratörspanel. Detta tar dig till WordPress temaanpassare. Här kan du ändra dina temainställningar med en förhandsgranskning i realtid för att se ändringarna på din webbplats.

Under fliken Färger och bakgrunder kan du välja bakgrundsbild eller ändra bakgrundsfärg och mönster. Leta upp knappenVälj bild och klicka på den.

Nu visas WordPress-mediebiblioteket där du kan ladda upp en bild från din dator eller välja en bild från mediebiblioteket för att använda den som bakgrundsbild på din WordPress-webbplats.

Klicka på den bild som du vill använda som bakgrundsbild och tryck på “Välj bild” för att fortsätta. Detta stänger nu mediebiblioteket och den valda bilden visas i förhandsgranskningssektionen i temats anpassningsverktyg.

Du kan anpassa bakgrundsbilden ytterligare genom att välja“Alternativ“. Här kan du placera bilden, upprepa den (om den inte är tillräckligt stor) och mycket mer.

2. Använd en plugin för att anpassa bakgrundsbilden i WordPress

Om ditt tema inte tillåter att du anpassar bakgrundsbilden via anpassningsverktyget kan du använda ett plugin som fungerar med alla teman.

Med insticksprogrammet Full Screen Background Pro kan du ställa in bakgrunder för alla inlägg, sidor eller andra delar av din WordPress-webbplats.

Alla bilder kommer automatiskt att göras i fullskärmsläge och mobilanpassas, vilket är mycket svårt att åstadkomma med hjälp av anpassningsverktyget för temat.

Installera först insticksprogrammet Full Screen Background Pro. När det är installerat aktiverar du insticksprogrammet.

Navigera till Appearance > Full Screen BG Image där du kan konfigurera inställningarna för insticksprogrammet.

Detta plugin är ett premium-plugin och är därför inte gratis. När du navigerar till ovanstående plats kan du bli ombedd att ange din licensnyckel. Det finns i det e-postmeddelande som du fick efter att du köpte insticksprogrammet.

Klicka påSave Settings (Spara inställningar) för att spara ändringarna. Nu kan du börja lägga till bakgrundsbilder till dina WordPress-sidor, inlägg och kategorier.

Välj “Add Image” (Lägg till bild) på insticksmodulets inställningssida. Precis som i metod ett väljer du “Välj bild” för att starta mediebiblioteket i WordPress.

Du måste lägga till ett bildnamn, men det kommer bara att visas i WordPress backend, så ge det ett namn som är relevant för bilden.

Välj var du vill att bilden ska visas:

  • Global
  • Kategori:
  • Arkiv
  • Sidor
  • Inlägg
  • Blogg
  • Första sidan
  • Sök på
  • 404
  • Inloggning
Klicka på Save Image (Spara bild) för att spara din nya bakgrundsbild. Du kan lägga till flera bilder genom att gå tillbaka till Appearance > Full Screen BG Image.
Om du har valt mer än en bild kommer insticksprogrammet att visa bakgrundsbilderna som ett bildspel. Du kan justera inställningarna för bildspelet via alternativet “fadein effects”.

3. Lägg till en bakgrundsbild via CSS Hero

CSS Hero är ett WordPress-plugin som gör det möjligt att ändra temat på din WordPress-webbplats utan att du behöver programmera.

Detta är ett perfekt alternativ för nybörjare som vill ha mer flexibilitet än vad anpassningsverktyget erbjuder, men som kanske inte är beredda på andra mer komplicerade metoder.

Installera och aktivera CSS Hero och gå sedan till din hemsida på din internetbrwoser. Överst ser du alternativet“Anpassa med CSS Hero“; klicka på den länken i administratörsfältet.

CSS Hero är ett premium-plugin, med planer som börjar från 19 dollar per år. Om du bara anpassar en webbplats kan du välja alternativet Starter.

När du har klickat på knappen i administrationsfältet visas CSS Hero-alternativen. Håll musen över det område som du vill ändra bakgrundsbilden på.

Välj bakgrundslänken i den vänstra sidofältet och välj sedan “Image” (bild). Du kan ladda upp dina egna bilder eller välja en bild från Unsplash, som är en gratis webbplats för bilder.

När du har den bild som du vill lägga till som bakgrundsbild på din WordPress-webbplats väljer du “Tillämpa bild”. Du kan justera storleken på din bild med mera via alternativen.

Om du är redo att se din nya bakgrundsbild i aktion klickar du på “Spara och publicera”. CSS Hero fungerar tillsammans med en rad andra plugins som Elementor, så se till att kontrollera kompatibiliteten innan du köper den.

4. Lägg till en bakgrundsbild med CSS

WordPress lägger som standard till CSS-klasser till olika element på din WordPress-webbplats. Om du är redo att experimentera med CSS-kod kan den här metoden vara bäst för dig.

Om du har en kategori på din WordPress-webbplats som heter “Recensioner” kommer CSS-klasser automatiskt att läggas till när denna kategorisida visas.

Navigera till en kategorisida, högerklicka med musen och välj sedan “Inspektera”. Du kan se de CSS-klasser som WordPress har lagt till.

I det här exemplet kan du användaCSS-klassen category-reviews för attskapa en annan stil för den här kategorin än för andra kategorier på din WordPress-webbplats.

Lägg till följande anpassade CSS i ditt tema och kom ihåg att byta ut kategorin och bakgrundsbilden enligt dina egna önskemål.

1
2
3
4
5
6
7
body.category-reviews {
background-image: url("http://example.com/wp-content/uploads/2019/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

5. Roundup

Vi hoppas att den här artikeln har varit användbar för att lära dig hur du lägger till en bakgrundsbild i WordPress. För fler WordPress-handledningar, besök vår bloggsida och använd sökfunktionen för att hitta fler WordPress-handledningar!