Hva er den store forskjellen på et bakgrunnsbilde og et «vanlig» bilde?

Hva er den store forskjellen på et bakgrunnsbilde og et «vanlig» bilde?

Strever du med å få et bakgrunnsbilde til å vise akkurat det du ønsker det skal vise? Eller kanskje du synes det er vanskelig å forstå hva som er hva, når du skal bruke bilder på nettsiden din.

Vi tar de «vanlige» bildene først!

Med vanlig bilde, så mener jeg et bilde som vises i sin helhet, uansett skjermstørrelse det vises på.

Her er et eksempel hvor jeg har valgt blokka som heter «Bilde». Når du klikker på pluss tegnet for å sette inn et bilde, så er det nettopp den blokka som faktisk heter «Bilde» du skal bruke.

Dette er en vanlig bildeblokk hvor bildet vil vises i sin helhet, uansett skjermstørrelse.
Dette er en vanlig bildeblokk hvor bildet vil vises i sin helhet, uansett skjermstørrelse.

Dette bildet vil aldri bli beskjært slik at noe av bildet blir borte. Uansett om jeg velger standardbredde, full bredde eller bred bredde, så vil hele bildet vises.

Bakgrunnsbilder kan legges inn på flere måter.

En annen standardblokk i WordPress er den som heter «Omslag». Den dukker også opp når du klikker på plusstegnet.

Det første du ser når du legger inn «Omslag» er at du får et filter over bildet. Og oppå bildet står markøren og blinker og oppfordrer deg til å skrive tekst.

Under har jeg satt inn to omslag under hverandre, med samme bilde. Det første er midtjuster Dvs. at det vises i samme bredde som teksten på bloggen her vises i.

Tema: Bakgrunnsbilder

Det andre er satt til å vises i full bredde (noe som forutsetter at du har et theme som er gutenbergoptimalisert).

NB! Hvis du ser disse to bildene på mobil, så vil de se akkurat like ut. Du må se bloggen på stor skjerm, for å se forskjellen.

Tema: Bakgrunnsbilder

Som du ser i innstillingene for omslaget, så er begge de to omslagene satt til å vises i en minimumshøyde på 300px.

Og hvis du ser bildene over på en desktop/laptop i f.eks 13″ til 17″, så vil du se at bildene har samme høyde, men det nederste bildet strekkes til full bredde.

Det gjør at bein og ører på føllet blir «kappet bort» i full bredde.

Og du som forsatt ser dette innlegget på mobil, skjønner ikke hva jeg prater om, fordi du ser både ører og bein 🙂

Dette er grunnen til at abstrakte bilder ofte passer best som bakgrunnsbilder. Bruker du bilder av mennesker så blir det ofte enda verre hvis halve hoder blir borte 😉

På bakgrunnsbilder er det det du legger oppå, som bestemmer hvor mye av bildet som skal vises.

Hvis jeg hadde lagt til et langt avsnitt med tekst, under overskriften på de to bildene, så ville høyst sannsynlig ører og bein på føllet bli med på en stor skjerm.

Men skriver jeg mye nok tekst, og du ser dette på mobil, så vil kanskje hode og hale på føllet bli kappet av i stedet. Slik som her:

Slik ser det ut på mobil med mye tekst på bildet.

Igjen, det er en grunn til at motivet på bakgrunnsbilder ikke bør være hovedfokus. Abstrakte bilder og landskapsbilder fungerer ofte godt.

Når du bruker plugins, så kan bildet ofte vises som en tynn stripe før du legger til innhold.

Det finnes etterhvert ganske mange utvidelser som lar deg bruke bakgrunnsbilder på mange ulike typer blokker. En av mine favoritter er Ultimate Addons for Gutenberg. De to blokkene jeg bruker mest er «Section» og «Advanced Columns».

En «Section» er bare en tom beholder som du kan putte noe inni. Her er et eksempel fra en av malene i «Ny nettside på 7 dager» kurset vårt. Her har vi en «Section» på toppen med et bakgrunnsbilde. Inni seksjonen ligger en kolonneblokk med to kolonner. Men kun venstre kolonne har innhold:
En overskrift, to linjer med tekst og to knapper.

For å sette opp en side som ser ut som det her, legger jeg først inn en «Section» blokk fra Ultimate Addons for Gutenberg. Jeg klikker på «Background», velger bilde og henter opp det bildet jeg vil ha som bakgrunnsbilde fra mediagalleriet mitt. Da ser det slik ut:

«Section» med bildebakgrunn.

Som du ser(bildet er klikkbart) så er det et plusstegn inni denne seksjonen. Jeg klikker for å sette inn kolonner og legger inn ønsket tekst og knapper. Fra forsiden ser det da slik ut:

Her må jeg enten legge til margin over og under kolonneblokka, eller legge til padding (som nå oversettes til polstring på norsk) på «Section» blokka. I dette tilfellet velger jeg det siste:

Da har vi en layout som ser fin ut i fullskjerm på desktop:

En av grunnene til at jeg liker Ultimate Addons for Gutenberg er at den lar meg sette individuelle marginer/padding på desktop, nettbrett og mobil. Så her kan jeg velge å redusere padding for å vise mer av bildet på mobil og nettbrett.

Det er en av de tingene vi viser deg i «Ny nettside på 7 dager» kurset 😉

Filter over bakgrunnsbilder

Når du bruker bakgrunnsbilder med store kontraster mellom lyse og mørke felter, så er det viktig at du tar hensyn til lesbarhet. I bildet av jenta med hunden, så går fargespekteret fra nesten sort til helt hvitt.

Når du bruker «Omslag» blokka som er en av standardblokkene i WordPress, så legges det automatisk til et filter over bildet. Bruker du UAG eller andre typer plugins, så vil de fleste gi deg muligheten til å velge farge og gjennomsiktighetsgrad på filteret.

I UAG finner du denne innstillingen rett under der du hentet opp bildet.

Her ser du jeg har valgt en tilnærmet svart «overlay color» og satt gjennomsiktighetsgraden til 45%. Det

Det finnes tilfeller hvor du faktisk bør velge forskjellige bakgrunnsbilder på hhv stor og liten skjerm. Du ser hvordan det kan løses her.

Jeg håper det ga deg litt bedre innsikt i forskjellen på bakgrunnsbilder og vanlige responsive bilder.


3 thoughts on “Hva er den store forskjellen på et bakgrunnsbilde og et «vanlig» bilde?

  1. Tusen takk! Dette er en veldig nyttig blog post! Det er lett å gå seg vill i de ulike bilde-alternativene. Grrrr!
    Akkurat nå får jeg ikke midtstilt en /knapp i en /section. Når jeg klikker på + tegnet står til og med det i midten. Men når jeg forsøker og legge inn en knapp-blokk, legger den seg til venstre, og jeg får ikke flyttet den f.eks. under en avstandsmeny. Hvorfor ikke, vet du det??

    1. Hei Silvie! Har du en link til den siden du forsøker å legge inn knappen på? Send meg gjerne en mail med hvilken av sidene du sliter med, så skal jeg gå inn og sjekke 😉

Skriv en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Dette nettstedet bruker Akismet for å redusere spam. Lær om hvordan dine kommentar-data prosesseres.

Ikke gå glipp av nyheter fra WP Skolen

Du vil motta e-post fra oss når vi har nye blogginnlegg, nyheter eller tilbud som vi tror vil være av interesse for deg. Du kan melde deg av når du vil!

Your Cart