Hvordan løse utfordringen med bakgrunnsbilder?

Hvilken utfordring?

Den med personer og kroppsdeler som forsvinner ut av skjermen!

I gamle dager, når alle hadde en standard skjerm til pc, så var ikke dette noen utfordring. Men nå kan du se nettsider på alt fra mobil til en mega stor skjerm. Da må også all tekst kunne leses på alle skjermstørrelser. Og ligger teksten på et bakgrunnsbilde, så er det ikke til å unngå at deler av bildet ikke vises. Men, det finnes måter å løse det på 😉 Les videre og se videoen over!

Dette er det spørsmålet vi får oftest på WP Skolen:

Hvorfor vises ikke hele bakgrunnsbildet?

Bakgrunnsbilder

Det er så enkelt som at teksten er fokus, ikke bildet. Bildet vil alltid tilpasses teksten som ligger oppå, ikke motsatt. Her et eksempel fra mobilskjerm.

Og under, et eksempel med samme bilde fra desktop størrelse på skjerm:

Men dette kan løses ved å velge ulike bilder, ett for desktop og ett for mobil/nettbrett. Dette løses veldig enkelt med en plugin som heter EditorsKit. Installer og aktiver den, og du vil få opp valget “Responsive” på alle slags blokker(nesten).

I videoen over har jeg lagt inn to “Omslag” blokker, men valgt ulike innstillinger for visning under “Responsive” valget.

Det første omslaget har et bilde som er egnet for desktop, men på mobil vil ingen av oss bli med på bildet. Derfor lar jeg “Hide on desktop”(1) stå, men aktiverer “Hide on mobile” og “Hide on tablet”(2):

På omslag nr 2 gjør jeg motsatt, aktiverer “Hide on desktop”(1) og lar “Hide on tablet” og “Hide on mobile”(2):

Så enkelt – rett og slett!

Og dette gjelder selvfølgelig ikke bare bakgrunnsbilder. Du kan vise/skjule alle slags blokker på samme måte, men det er kanskje nettopp ved bruk av bakgrunnsbilder hvor behovet for denne funksjonen er størst.

Kristin Skjæringrud
Kristin Skjæringrud

Kristin Skjæringrud er "rektor" på WP Skolen og mener at WordPress kan brukes til (nesten) alt. Men først og fremst til å bygge nettsider med ;-)

Artikler: 143

Legg igjen 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.