Hvordan legge til et bakgrunnsbilde i WordPress

Lurer du på hvordan du legger til et bakgrunnsbilde på WordPress-nettstedet ditt?

Bakgrunnsbilder kan brukes på en rekke forskjellige nettsteder for å gjøre dem mer engasjerende og kan forbedre nettstedets design .

Vi vil lede deg gjennom steg-for-steg om hvordan du enkelt legger til et bakgrunnsbilde på WordPress-siden din.

Innholdsfortegnelse

1. Legg til et bakgrunnsbilde via WordPress-temainnstillinger

De fleste WordPress-temaer tilbyr tilpasset bakgrunnsstøtte. Dette betyr at du enkelt kan endre bakgrunnsbildet på WordPress-siden din.

Dette er sannsynligvis den enkleste måten å legge til en bakgrunn på, så hvis WordPress-temaet ditt støtter dette, kan du fortsette med denne metoden.

Hvis temaet ditt ikke tilbyr denne funksjonen, har vi mange andre metoder oppført nedenfor som du kan følge.

Naviger til Utseende> Tilpass i WordPress-admin-dashbordet. Dette tar deg til WordPress-tematilpasseren. Her kan du endre temainnstillingene dine med en live forhåndsvisning for å se endringene på nettstedet ditt.

Under fanen Farger og bakgrunner vil du se alternativer for å velge bakgrunnsbilde, eller endre bakgrunnsfarge og mønster. Finn ” Velg bilde “-knappen og klikk på den.

Du vil nå se WordPress-mediebiblioteket ditt der du kan laste opp et bilde fra datamaskinen din, eller velge et bilde fra mediebiblioteket ditt for å bruke som bakgrunnsbilde på WordPress-nettstedet ditt.

Klikk på bildet du vil angi som bakgrunnsbilde og trykk “Velg bilde” for å fortsette. Dette vil nå lukke mediebiblioteket og det valgte bildet vil vises i forhåndsvisningsdelen av temaets tilpasning.

Du kan tilpasse bakgrunnsbildet ditt ytterligere ved å velge ” Alternativer “. Her ser du muligheten til å plassere bildet ditt, gjenta det (hvis det ikke er stort nok) og mer.

2. Bruk en plugin for å tilpasse bakgrunnsbilde i WordPress

Hvis temaet ditt ikke tillater deg å tilpasse bakgrunnsbildet via tematilpasningen, kan du bruke en plugin som fungerer med ethvert tema.

Full Screen Background Pro -plugin lar deg angi bakgrunner for alle innlegg, sider eller andre deler av WordPress-nettstedet ditt.

Alle bilder vil automatisk bli gjort fullskjerms- og mobilresponsive, noe som er svært vanskelig å oppnå gjennom tematilpasningen.

Installer først Full Screen Background Pro-plugin . Når den er installert, aktiverer du plugin-modulen.

Naviger til Utseende> Fullskjerm BG-bilde hvor du kan konfigurere plugin-innstillingene.

Denne plugin er en premium plugin, og er derfor ikke gratis. Når du navigerer til stedet ovenfor, kan du bli bedt om å angi lisensnøkkelen din. Dette finner du i e-posten du mottok etter at du kjøpte plugin.

Klikk på ” Lagre innstillinger ” for å lagre endringene. Nå er du klar til å begynne å legge til bakgrunnsbilder til WordPress-sidene, innleggene og kategoriene dine.

Velg ‘ Legg til bilde ‘ på innstillingssiden til plugin-modulen. Som vi gjorde det metode én, velg “Velg bilde” for å starte mediebiblioteket i WordPress.

Du må legge til et bildenavn, men dette vil bare vises i bakenden av WordPress, så navngi det noe som er relevant for bildet.

Velg hvor du vil at bildet skal vises:

  • Global
  • Kategori
  • Arkiv
  • Sider
  • Innlegg
  • Blogg
  • Forside
  • Søk
  • 404
  • Logg Inn
Klikk “Lagre bilde” for å lagre det nye bakgrunnsbildet. Du kan legge til flere bilder ved å gå tilbake til Utseende> Fullskjerm BG-bilde .
Hvis du har valgt mer enn ett bilde, vil plugin-en vise bakgrunnsbilder som en lysbildefremvisning. Du kan justere lysbildefremvisningsinnstillingene via alternativet ‘fadein-effekter’.

3. Legg til et bakgrunnsbilde via CSS Hero

CSS Hero er en WordPress-plugin som gjør det mulig å endre WordPress-nettstedets tema uten noen form for koding.

Dette er et perfekt alternativ for nybegynnere som ønsker mer fleksibilitet enn tematilpasningen tilbyr, men som kanskje ikke er forberedt på andre mer kompliserte metoder.

Installer og aktiver CSS Hero , og naviger deretter til hjemmesiden din i nettleseren din. Øverst ser du alternativet ” Tilpass med CSS Hero “; klikk på denne koblingen i administrasjonslinjen.

CSS Hero er en premium plugin, med planer som starter fra $19 per år. Hvis du bare tilpasser ett nettsted, kan du velge Starter-alternativet.

Når du har klikket på knappen i administrasjonslinjen, får du CSS Hero-alternativene. Hold musepekeren over området du vil endre bakgrunnsbildet på.

Velg bakgrunnskoblingen i venstre sidefelt og velg deretter “Bilde”. Du kan laste opp dine egne bilder eller velge et fra Unsplash, som er et gratis lagerfotonettsted.

Når du har bildet du vil legge til som bakgrunnsbilde på WordPress-nettstedet ditt, velger du “Bruk bilde”. Du kan justere størrelsen på bildet ditt og mer via alternativene.

Hvis du er klar til å se det nye bakgrunnsbildet ditt i aksjon, klikker du på “Lagre og publiser”. CSS Hero fungerer med en rekke andre plugins som Elementor, så sørg for å sjekke kompatibiliteten når du kjøper den.

4. Legg til et bakgrunnsbilde ved hjelp av CSS

WordPress legger som standard CSS-klasser til de forskjellige elementene på WordPress-siden din. Hvis du er klar til å eksperimentere med CSS-kode, kan denne metoden være best for deg.

Hvis du har en kategori på WordPress-siden din som heter “Anmeldelser”, vil CSS-klasser automatisk bli lagt til når denne kategorisiden vises.

Naviger til en kategoriside, høyreklikk med musen og velg “Inspiser”. Du vil kunne se CSS-klassene som er lagt til av WordPress.

I dette eksemplet kan du bruke CSS -klassen for kategorianmeldelser for å style denne kategorien annerledes enn andre på WordPress-siden din.

Legg til følgende tilpassede CSS til temaet ditt, og husk å erstatte kategorien og bakgrunnsbildet etter dine egne krav.

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 håper denne artikkelen har vært nyttig for å lære deg hvordan du legger til et bakgrunnsbilde i WordPress. For flere WordPress-veiledninger, besøk bloggsiden vår og bruk søkefunksjonen for å finne flere WordPress-guider!