Sådan tilføjes et baggrundsbillede i WordPress

Baggrundsbilleder kan gå langt hen imod gør din hjemmeside mere attraktiv for dine besøgende. Mere overbevisende end en monokrom baggrund kan de illustrere et punkt, du gør, eller sætte stemningen for hele dit websted.

I denne vejledning viser vi dig flere måder, hvorpå du kan tilføje et baggrundsbillede i WordPress. Her er hvad vi vil diskutere:

Men før vi begynder, må vi bemærke, at det ikke er muligt at give et enkelt, endeligt svar på hvordan man tilføjer et baggrundsbillede i WordPress, på grund af mange faktorer, der påvirker det overordnede layout og udseende af en webside. Temaet dikterer frem for alt evnen eller manglende evne til at tilføje et baggrundsbillede til dele eller hele en side. Vi har givet dig tre forskellige måder, men det er ikke sikkert, at de alle virker, eller de kan fungere forskelligt, afhængigt af det tema, du bruger. Selv udtrykket “baggrund” kan relatere til forskellige områder af forskellige temaer. Alligevel læs videre, da en af ​​disse metoder måske er lige det, du har brug for.

Sådan tilføjer du et baggrundsbillede ved hjælp af dit temas indstillinger

Dette kan være et godt tidspunkt at påpege, at store billeder af høj kvalitet har en tendens til at sænke indlæsningstiden. Alligevel er der ting, du kan gøre for at optimere dine billeder og gøre dem så nemme at indlæse som muligt. Hvis du bygger et websted med indlæsningshastighed i tankerne, har vi også dækket gentagne (flisebelagte) baggrunde.

Hvis dit tema har en baggrundsindstilling, som mange populære temaer gør i dag, kan du bruge det til at opsætte dit baggrundsbillede. De fleste temaer, der har denne funktionalitet, fungerer meget det samme. Vi brugte WordPresss standard Twenty Twenty-tema.

Først skal du navigere til tematilpasningen fra Udseende>Tilpas i dit WordPress-dashboard.

Dernæst vil du have Baggrundsbillede undermenu i venstre side af skærmen.

Hvis du klikker på det, kommer du til Vælg billede knap. Du kan tilføje et baggrundsbillede fra dit mediebibliotek, eller du kan uploade et. Vi har udvalgt en fra vores mediebibliotek.

Og der er du, du har nu ændret din baggrund.

Twenty Twenty-temaet, vi bruger, giver os nogle muligheder her. Du kan bruge et billede, der kan flisebelægges (gentages), såsom vores lille grønne blad der, eller du kan bruge et enkelt billede til din baggrund.

Hvis det er tilfældet, skal du bruge højopløsningsbilleder til din hjemmeside, som fylder hele bredden af ​​din side, men de kan tage meget tid at indlæse og kan føre til dårlige brugeroplevelser. Det er virkelig op til dig at finde ud af, hvilke billeder og indstillinger der passer til dit tema og din hjemmesidestil.

Bemærk dog, at selvom mange temaer har mulighed for at tilføje et baggrundsbillede på denne måde, gør de fleste det ikke, hvorfor du muligvis skal ty til en af ​​de to andre metoder, vi har skitseret i denne artikel.

Sådan tilføjes et baggrundsbillede ved hjælp af CSS

Er du mere en hands-on bruger, har du også mulighed for ændre din CSS for at opsætte et baggrundsbillede for individuelle indlæg, men også kategorier, forfattere og andre CSS-klasser.

Du kan ændre baggrunden for en kategori eller for hele webstedet ved hjælp af tematilpasningen. Naviger til det fra dit WordPress-dashboard ved at klikke på Udseende>Tilpas.

Når du er der, skal du åbne Yderligere CSS afsnit.

Du skal tilføje nogle linjer kode til CSS-feltet for at tilføje et baggrundsbillede. For at ændre baggrunden for hele webstedet, brug denne kode:

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

Du skal selvfølgelig erstatte XXX med URL’en på det billede, du gerne vil bruge. Vi har udvalgt en fra vores mediebibliotek.

Hvis du vil ændre det for sider med en bestemt kategori, fungerer det dog lidt anderledes. Den kode du ønsker er denne:

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

Du skal, som ovenfor, ændre XXX til en gyldig billed-URL, mens du også skifter YYY med en gyldig kategori.

Og det er virkelig alt, hvad der er til det!

Sådan tilføjes en baggrund til specifikke indholdssektioner

Nu, som altid, er vores forslag at bruge et temas funktionalitet, når du kan, da det er prøvet og testet til at virke. Men hvis et tema, du bruger, ikke har den funktionalitet, du har brug for, du kan sikkert finde et plugin det gør. Vores foretrukne plugin er Avancerede WordPress-baggrunde. Når du har installeret og aktiveret pluginnet, har du fået en speciel Gutenberg-blok, som du kan bruge til at opsætte en dynamisk baggrund.

Dette plugin fungerer primært ved at opsætte en slags metablok, som fungerer som baggrund, og som du så skal udfylde med endnu en blok eller blokke.

Vi viser dig, hvordan du gør dette i et indlæg.

Først vil vi oprette et indlæg fra vores WordPress-dashboard ved at vælge Indlæg>Tilføj ny. Derefter, efter at have indtastet titlen og udfyldt den med to afsnitsblokke, trykker vi enter efter det første afsnit og klikker derefter på plus underskriv og tilføj en Baggrund blok.

Nu skal du konfigurere blokken. Standardindstillingen er Farve, som er en simpel farveblok, du kan vælge, hvis du ønsker en monokrom baggrund. En anden interessant mulighed er Video baggrund. Du kan bruge dette plugin til at opsætte en videobaggrund, uanset om det er i loop eller single-play, og du behøver ikke engang at hoste det på dit websted: pluginnet understøtter YouTube- og Vimeo-hostede videoer. Til denne demonstration er vi dog hovedsageligt optaget af Billede baggrund.

Ved at klikke på Billede knappen, finder du et sæt kontrolelementer til dette plugin. I den Billede sektion, klik på Vælg billede knappen, og upload enten et billede eller vælg et billede fra dit mediebibliotek.

Når du har gjort det, vil du opdage, at billedet har optaget en del af baggrunden. I højre side finder du parallakse- og afstandsmuligheder, som du kan bruge, hvis du ønsker at få din hjemmeside til at se lidt mere dynamisk ud. Helt øverst finder du positionsbetjeningen. Du kan vælge, hvilken del af billedet, der skal vises, baseret på indikatorens position på akserne. Standarden (50 % vandret og 50 % lodret) er, hvor vi vil forlade den nu – lige midt i billedet.

Nu bliver vi nødt til at tilføje det indhold, som dette billede vil være baggrund for. For at gøre det skal du blot klikke på plus skilt i midten af ​​baggrundsblokken. Vi vil gå efter en afsnitsblok, men du kan vælge hvilken som helst blok, du kan lide. Et citat eller en overskrift kan for eksempel se godt ud på en parallakse baggrund.

Vi har indsat vores tekst og ændret dens farve i blokindstillinger-fanen til hvid, jo bedre at blive forskudt af baggrunden. Og det er virkelig det.

Nu, ved at klikke på forhåndsvisningsknappen, kan vi se plugin’et i aktion.

Og nu kan du tilføje hvilken som helst slags baggrund, du ønsker, til den individuelle indholdssektion på dit websted, du ønsker at fremhæve.

Afslutningsvis

Et baggrundsbillede kan virkelig få din hjemmeside til at skille sig ud for dine brugere som en stor, skinnende nål i en høstak af trist halm. Det kommer dog med en omkostning: du bliver sandsynligvis nødt til at gemme medier i stort format, og de vil påvirke indlæsningstiderne negativt. Alligevel er smuk grafik stadig den bedste måde at gøre et varigt første indtryk på, og internetbrugere er kommet til at forvente professionelt, iøjnefaldende design. Baggrunden vil sandsynligvis være det største enkeltstående grafiske element på dine besøgendes skærme. Hvis du har råd til den øgede indlæsningstid, hvorfor så ikke gøre dine besøgendes oplevelse visuelt interessant? Så uanset om du gør det ved at bruge dit temas oprindelige indstillinger, et plugin eller CSS, ved du nu, hvordan du gør det.