Hur man lägger till en bakgrundsbild i WordPress

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


Hur man lägger till en bakgrundsbild i WordPress

Videohandledning

Prenumerera på WPBeginner

Om du inte gillar videon eller behöver fler instruktioner fortsätter du att läsa.

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

De flesta gratis och premium WordPress-teman har anpassad bakgrundssupport. Med den här funktionen kan du enkelt ställa in en bakgrundsbild på 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. Om ditt tema inte stöder anpassad bakgrundsfunktion kan du dock använda andra metoder i den här artikeln.

Först måste du besöka Utseende »Anpassa -sidan i din WordPress-admin. Detta startar WordPress-tematilpassaren där du kan ändra olika temainställningar medan du visar en direkt förhandsvisning av din webbplats.

Alternativ för bakgrundsbild i WordPress-temanpassare

Därefter måste du klicka på alternativet ‘Bakgrundsbild’. Panelen glider in och visar alternativen för att ladda upp eller välja en bakgrundsbild för din webbplats.

Välj bakgrundsbild

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

Detta kommer att öppna WordPress media uploader popup där du kan ladda upp en bild från din dator. Du kan också välja en tidigare överförd bild från mediebiblioteket.

Ladda upp bakgrundsbild

Därefter måste du klicka på Välj bild-knappen efter att ha laddat upp eller valt den bild du vill använda som bakgrund.

Det här stänger popup-uppspelningen för media och du ser förhandsvisningen av den valda bilden i tematillpassaren.

Bakgrundsbildinställningar

Under bilden kan du också se alternativen för bakgrundsbild. Under förinställning kan du välja hur du vill att bakgrundsbilden ska visas: fyllningsskärm, passningsskärm, repetition eller anpassad.

Du kan också välja bakgrundsposition genom att klicka på pilarna nedan. Om du klickar på mitten kommer bilden att anpassas till skärmens mitt.

Glöm inte att klicka på ‘Spara’ & Publicera-knappen överst för att lagra dina inställningar. Det är allt, du har 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 anpassad bakgrundsbild i WordPress med hjälp av plugin

Denna metod är mycket mer flexibel. Det fungerar med alla WordPress-teman och låter dig ställa in flera bakgrundsbilder. Du kan också ställa in olika bakgrunder för alla inlägg, sida, kategorier eller andra avsnitt på din WordPress-webbplats.

Det gör att alla dina bakgrundsbilder blir fulla på skärmen och på mobilen. Detta innebär att din bakgrundsbild automatiskt ändrar storleken på mindre enheter.

Först måste du installera och aktivera Full Screen Background Pro-plugin. Mer information finns i vår steg för steg-guide för hur du installerar ett WordPress-plugin.

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

Helskärmbakgrund

Du blir ombedd att lägga till din licensnyckel. Du kan få den här informationen från e-postmeddelandet du fick efter att du har köpt plugin-programmet eller från ditt konto på plugin-webbplatsen.

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.

Gå vidare och klicka på knappen “Lägg till ny bild” på inställningssidan för plugin. Detta tar dig till skärmen för uppladdning av bakgrundsbild.

lägg till ny bakgrundsbild

Klicka på knappen Välj bild för att ladda upp eller välj en bild. Så snart du väljer bilden kommer du att kunna se en direkt 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 vad som helst här.

Slutligen måste du välja var du vill att bilden ska användas som bakgrundssida. Helskärm Bakgrund Pro låter dig 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å knappen Spara bild för att spara din bakgrundsbild.

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

Om du ställer in mer än en bild som ska användas globalt, kommer plugin automatiskt att visa bakgrundsbilder som bildspel.

Du kan justera tiden det tar för en bild att bleka ut och tiden efter vilken ny bakgrundsbild börjar bleka.

Bakgrunden bleknar in och bleknar inställningarna

Tid du anger här är i millisekunder. Om du vill att en bakgrundsbild ska försvinna 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 osv

Full Screen Background Pro låter dig också ställa in bakgrundsbilder för enstaka inlägg, sidor, kategori, tagg osv.

Redigera bara inlägget / sidan där du vill visa en annan bakgrundsbild. På skärmen för redigering av inlägg kommer du att märka den nya rutan “Full Screen Background Image” under postredigeraren.

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

Om du vill använda en bakgrundsbild för en viss kategori måste du besöka Utseende »Helskärm BG-bild 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.

Ställ in bakgrundsbild för en specifik kategori

Ange nu det specifika kategori-ID eller snäppa 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 spara dina inställningar.

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

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 enskilda inlägg, kategorier, författare och andra sidor med dessa WordPress-genererade CSS-klasser.

Till exempel, om du 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 inspekteringsverktyget för att se exakt vilka CSS-klasser som läggs till av WordPress i body-taggen.

Använd inspekteringsverktyget för att se klasser tillagda av WordPress

Du kan använda antingen kategoritv eller kategori-4 CSS-klasser för att utforma just denna kategorisida annorlunda.

Låt oss lägga till en anpassad bakgrundsbild på en arkivsida med kategorier. Du måste lägga till denna anpassade CSS till ditt tema.

body.category-tv {
bakgrund-bild: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
bakgrundsposition: centrumcentrum;
bakgrundsstorlek: täcka;
bakgrund-upprepa: ingen upprepa;
bakgrundsfästning: fast;
}

Glöm inte att byta ut bakgrundsbildens URL och kategoriklassen 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 body-taggen. 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älpte 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 trick för WordPress-funktionsfilen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map