Hur man lägger till en bakgrundsbild i WordPress

Bakgrundsbilder kan räcka långt mot gör din webbplats mer tilltalande för dina besökare. Mer övertygande än en monokrom bakgrund kan de illustrera en poäng du gör eller skapa stämningen för hela din webbplats.

I den här handledningen kommer vi att visa dig flera sätt på vilka du kan lägga till en bakgrundsbild i WordPress. Här är vad vi kommer att diskutera:

Men innan vi börjar måste vi notera att det inte är möjligt att ge ett enda, definitivt svar på hur man lägger till en bakgrundsbild i WordPress, på grund av många faktorer som påverkar den övergripande layouten och utseendet på en webbsida. Temat, framför allt, dikterar förmågan eller oförmågan att lägga till en bakgrundsbild till delar av eller hela sidan. Vi har gett dig tre olika sätt, men de kanske inte alla fungerar, eller kanske fungerar olika, beroende på vilket tema du använder. Även termen ”bakgrund” kan relatera till olika områden med olika teman. Fortfarande, läs vidare eftersom en av dessa metoder kan vara precis det du behöver.

Hur man lägger till en bakgrundsbild med hjälp av ditt temas inställningar

Detta kan vara ett bra tillfälle att påpeka att stora bilder av hög kvalitet tenderar att sakta ner laddningstiderna. Ändå finns det saker du kan göra för att optimera dina bilder och göra dem så lätta att ladda som möjligt. Om du bygger en webbplats med laddningshastighet i åtanke, har vi också täckt upprepade (kaklade) bakgrunder.

Om ditt tema har en bakgrundsinställning, som många populära teman nuförtiden gör, kan du använda den för att ställa in din bakgrundsbild. De flesta teman som har den här funktionen fungerar ungefär likadant. Vi använde WordPresss standard Twenty Twenty-tema.

Först måste du navigera till temaanpassaren från Utseende>Anpassa i din WordPress-instrumentpanel.

Därefter vill du ha Bakgrundsbild undermenyn till vänster på skärmen.

Om du klickar på det kommer du till Välj bild knapp. Du kan lägga till en bakgrundsbild från ditt mediebibliotek, eller så kan du ladda upp en. Vi har valt ut en från vårt mediebibliotek.

Och där har du, nu har du ändrat din bakgrund.

Twenty Twenty-temat vi använder ger oss några alternativ här. Du kan använda en bild som kan sida vid sida (upprepad), som vårt lilla gröna blad där, eller så kan du använda en enda bild för din bakgrund.

Om så är fallet behöver du högupplösta bilder för din webbplats som kommer att ta upp hela bredden på din sida, men de kan ta lång tid att ladda och kan leda till dåliga användarupplevelser. Det är verkligen upp till dig att ta reda på vilka bilder och inställningar som fungerar för ditt tema och din webbplatsstil.

Observera dock att även om många teman har möjlighet att lägga till en bakgrundsbild på det här sättet, gör de flesta det inte, vilket är anledningen till att du kan behöva ta till någon av de två andra metoderna som vi har beskrivit i den här artikeln.

Hur man lägger till en bakgrundsbild med CSS

Om du är mer av en praktisk användare har du också möjligheten att ändra din CSS för att skapa en bakgrundsbild för enskilda inlägg, men även kategorier, författare och andra CSS-klasser.

Du kan ändra bakgrunden för en kategori, eller för hela webbplatsen, med hjälp av temaanpassaren. Navigera till den från din WordPress-instrumentpanel genom att klicka på Utseende>Anpassa.

Väl där öppnar du Ytterligare CSS sektion.

Du måste lägga till några rader kod i CSS-fältet för att kunna lägga till en bakgrundsbild. För att ändra bakgrunden för hela webbplatsen, använd denna kod:

body {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Du måste naturligtvis ersätta XXX med webbadressen till bilden du vill använda. Vi har valt ut en från vårt mediebibliotek.

Om du vill ändra det för sidor med en viss kategori fungerar det dock lite annorlunda. Koden du vill ha är denna:

body.category-YYY {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Du måste, som ovan, ändra XXX till en giltig bild-URL, samtidigt som du byter ut YYY med en giltig kategori.

Och det är verkligen allt som finns!

Hur man lägger till en bakgrund till specifika innehållsavsnitt

Nu, som alltid, är vårt förslag att använda ett temas funktionalitet när du kan, eftersom det är beprövat och testat att fungera. Men om ett tema du använder inte har den funktionalitet du behöver, du kan förmodligen hitta ett plugin det gör. Vårt val av plugin är Avancerade WordPress-bakgrunder. När du har installerat och aktiverat pluginet har du fått ett speciellt Gutenberg-block som du kan använda för att skapa en dynamisk bakgrund.

Denna plugin fungerar i första hand genom att sätta upp ett slags metablock, som fungerar som bakgrund, och som du sedan behöver fylla med ett eller flera andra block.

Vi kommer att visa dig hur du gör detta i ett inlägg.

Först skapar vi ett inlägg från vår WordPress-instrumentpanel genom att välja Post>Lägg till ny. Sedan, efter att ha skrivit in rubriken och fyllt i den med två styckeblock, trycker vi på enter efter det första stycket och klickar sedan på plus underteckna och lägg till en Bakgrund blockera.

Nu måste du konfigurera blocket. Standardinställningen är Färg, vilket är ett enkelt färgblock som du kan välja om du vill ha en monokrom bakgrund. Ett annat intressant alternativ är Video bakgrund. Du kan använda detta plugin för att ställa in en videobakgrund, oavsett om det är i loop eller single-play, och du behöver inte ens ha det på din webbplats: pluginet stöder YouTube- och Vimeo-värdade videor. För denna demonstration är vi dock huvudsakligen bekymrade över Bild bakgrund.

Genom att klicka på Bild knappen, hittar du en uppsättning kontroller för detta plugin. I den Bild avsnittet, klicka på Välj bild och ladda antingen upp en bild eller välj en bild från ditt mediebibliotek.

När du har gjort det kommer du att upptäcka att bilden har tagit upp en del av bakgrunden. På höger sida hittar du parallax- och mellanrumsalternativ som du kan använda om du vill få din webbplats att se lite mer dynamisk ut. Allra högst upp hittar du positionsreglagen. Du kan välja vilken del av bilden som ska visas baserat på positionen för indikatorn på axlarna. Standardinställningen (50 % horisontellt och 50 % vertikalt) är där vi lämnar det nu – precis i mitten av bilden.

Nu måste vi lägga till innehållet som denna bild kommer att vara bakgrund till. För att göra det klickar du bara på plus tecken i mitten av bakgrundsblocket. Vi kommer att välja ett styckeblock, men du kan välja vilket block du vill. Ett citat eller en rubrik kan till exempel se bra ut mot en parallaxbakgrund.

Vi har klistrat in vår text och ändrat dess färg på fliken blockinställningar till vit, desto bättre för att kompenseras av bakgrunden. Och det är verkligen det.

Nu, genom att klicka på förhandsgranskningsknappen, kan vi se plugin i aktion.

Och nu kan du lägga till vilken typ av bakgrund du vill till vilken enskild innehållssektion på din webbplats du vill framhäva.

Sammanfattningsvis

En bakgrundsbild kan verkligen få din webbplats att sticka ut för dina användare som en stor, glänsande nål i en höstack av trist halm. Men det kommer med en kostnad: du kommer förmodligen att behöva lagra media i stort format, och de kommer att påverka laddningstiderna negativt. Ändå är underbar grafik fortfarande det bästa sättet att göra ett bestående första intryck, och internetanvändare har börjat förvänta sig professionell, iögonfallande design. Bakgrunden kommer sannolikt att vara det största enskilda grafiska elementet på dina besökares skärmar. Om du har råd med den ökade laddningstiden, varför inte göra dina besökares upplevelse visuellt intressant? Så oavsett om du gör det med hjälp av ditt temas ursprungliga inställningar, en plugin eller CSS, vet du nu hur du gör det.