Så här lägger du till en bakgrundsbild i WordPress

Vill du lägga till en bakgrundsbild till din WordPress-webbplats? Bakgrundsbilder kan användas för att göra din webbplats ser mer engagerande och estetiskt trevlig ut. I den här artikeln visar vi hur du enkelt lägger till en bakgrundsbild på din WordPress-webbplats.

Video Tutorial

Om du inte gillar videon eller behöver mer instruktioner, fortsätt läsa.

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

De flesta gratis och premium WordPress-teman levereras med anpassat bakgrundsstöd. Med den här funktionen kan du enkelt ställa in en bakgrundsbild till din WordPress-webbplats.

Om ditt 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 WordPress-webbplats. Men om ditt tema inte stöder anpassad bakgrundsfunktion kan du använda andra metoder i den här artikeln.

Först måste du besöka Utseende »Anpassa sida i din WordPress-admin. Detta kommer att starta WordPress teman anpassningsverktyg där du kan ändra olika temainställningar medan du tittar på en live förhandsvisning av din webbplats.

Därefter måste du klicka på alternativet "Bakgrundsbild". Panelen kommer att glida in och visa alternativen för att ladda upp eller välja en bakgrundsbild för din webbplats.

Klicka på välj bildknappen för att fortsätta.

Detta kommer att hämta upp WordPress Media Uploader popup där du kan ladda upp en bild från din dator. Du kan även välja en tidigare uppladdad bild från mediebiblioteket.

Därefter måste du klicka på knappen Välj bild efter uppladdning eller välja den bild som du vill använda som bakgrund.

Det här stänger popupen för uppladdning av media och du får se den valda bilden i förhandsgranskningen av temat.

Nedanför bilden kommer du också att kunna se alternativen för bakgrundsbilder. Under förinställning kan du välja hur du vill att bakgrundsbilden ska visas: fyll skärm, passform skärm, upprepa eller anpassad.

Du kan också välja bakgrundsbildposition genom att klicka på pilarna nedan. Om du klickar på mitten justeras bilden till mitten av skärmen.

Glöm inte att klicka på "Spara och publicera" -knappen längst upp för att lagra dina inställningar. Det är allt, du har framgångsrikt lagt till en bakgrundsbild på din WordPress-webbplats.

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

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

Denna metod är mycket mer flexibel. Den fungerar med alla WordPress-teman och låter dig ställa in flera bakgrundsbilder. Du kan också ställa in olika bakgrunder för någon post, sida, kategori eller någon annan del av din WordPress-webbplats.

Det gör automatiskt alla dina bakgrundsbilder till fulla skärm och mobila mottagliga. Det betyder att din bakgrundsbild automatiskt ändrar sig på mindre enheter.

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

Vid aktivering måste du besöka Utseende »BG-bild i helskärm sida för att konfigurera plugin-inställningarna.

Du kommer att bli ombedd att lägga till din licensnyckel. Du kan hämta den här informationen från det e-postmeddelande du fick efter att du köpt pluginprogrammet eller från ditt konto på plugins webbplats.

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

Fortsätt och klicka på knappen "Lägg till ny bild" på plugins inställningssida. Detta tar dig till bildbilden för uppladdning av bakgrunden.

Klicka på bilden för att ladda upp eller välj en bild. Så snart du väljer bilden kommer du att kunna se en levande förhandsvisning av bilden på skärmen.

Därefter måste du ange ett namn för den här bilden. Detta namn kommer att användas internt, så du kan använda något här.

Slutligen måste du välja var du vill att den här bilden ska användas som bakgrundssida. Full Screen Background Pro gör att du kan ställa in bilder som bakgrund globalt, eller du kan välja mellan olika delar av din webbplats som kategorier, arkiv, framsida, bloggsida, etc..

Glöm inte att klicka på spara bildknappen för att spara din bakgrundsbild.

Du kan lägga till så många bilder som du vill ha genom att besöka Utseende »BG-bild i helskärm sida.

Om du ställer in mer än en bild som ska användas globalt, startar pluginprogrammet automatiskt bakgrundsbilder som bildspel.

Du kan justera tiden som krävs för att en bild ska blekna ut och tiden efter vilken ny bakgrundsbild börjar blekna in.

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

Glöm inte att klicka på knappen Spara inställningar för att lagra dina ändringar.

Ställa in bakgrundsbild för enskilda inlägg, sidor, kategorier etc.

Full Screen Bakgrund Pro kan du också ställa in bakgrundsbilder för enskilda inlägg, sidor, kategorier, taggar etc..

Redigera bara posten / sidan där du vill visa en annan bakgrundsbild. På skärmen för postredigering kommer du att märka den nya rutan "Full Screen Background Image" under postredigeraren.

För att använda en bakgrundsbild för en viss kategori måste du besöka Utseende »BG-bild i helskärm sida och klicka sedan på knappen "Lägg till ny bild".

När du har laddat upp din bild kan du välja "Kategori" som det sammanhang där du vill visa bakgrundsbilden.

Ange nu det specifika kategorin ID eller slug där du vill visa bilden. Se vår guide om hur du hittar kategori-ID i WordPress.

Glöm inte att spara din bild för att lagra dina inställningar.

Metod 3. Lägg till anpassade bakgrundsbilder överallt i WordPress med CSS

Som standard lägger WordPress flera CSS-klasser till olika HTML-element i hela WordPress-webbplatsen. Du kan enkelt lägga till egna bakgrundsbilder till enskilda inlägg, kategorier, författare och andra sidor med hjälp av dessa WordPress-genererade CSS-klasser.

Om du till exempel har en kategori på din webbplats som kallas TV, kommer WordPress automatiskt att lägga till dessa CSS-klasser i kropps taggen när någon tittar på kategorin för TV.

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

Du kan använda antingen kategori-tv eller kategori-4 CSS-klassen för att stila just denna kategorisida annorlunda.

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

 body.category-tv background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); bakgrundsställning: center center; bakgrundsstorlek: omslag; background-repeat: no-repeat; bakgrundsbeslut: fast;  

Glöm inte att ersätta bakgrundsbildadress och kategoriklass med din egen kategori.

Du kan också lägga till anpassad bakgrund till enskilda inlägg och sidor. WordPress lägger till en CSS-klass med post- eller sid-ID i kroppstaggen. Du kan använda samma CSS-kod bara ersätta .category-tv med den postspecifika CSS-klassen.

Vi hoppas att den här artikeln hjälper dig att lära dig hur du lägger till en bakgrundsbild i WordPress. Du kanske också vill se vår lista över extremt användbara triks för WordPress-funktionsfilen.

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