Opprette et skalerende responsivt bakgrunnsbilde

Se på populære nettsteder i dag, og en designbehandling som du helt sikkert vil se er store, skjermspennende bakgrunnsbilder. En av utfordringene med å legge til disse bildene kommer fra den beste fremgangsmåten for at nettsteder må svare på forskjellige skjermstørrelser og enheter - en tilnærming kjent som Responsivt webdesign.

Ett bilde for mange skjermer

Siden nettstedets oppsett endres og skaleres med forskjellige skjermstørrelser, må også disse bakgrunnsbildene skalere størrelsen tilsvarende. Faktisk er disse "flytende bildene" en av nøkkelbitene på responsive nettsteder (sammen med et flytende rutenett og mediespørsmål). Disse tre stykkene har vært en stift for responsiv webdesign siden begynnelsen, men mens det alltid har vært ganske enkelt å legge til responsive innebygde bilder til et nettsted (innebygde bilder er grafikken som er kodet som en del av HTML-markeringen), og gjør det samme med bakgrunnsbilder (som er stylet inn på siden ved hjelp av CSS bakgrunnsegenskaper) har lenge gitt en betydelig utfordring for mange webdesignere og frontend utviklere. Heldigvis har tillegg av "bakgrunnsstørrelse" -egenskapen i CSS gjort dette mulig.

watch instagram stories

I en egen artikkel tok vi for oss hvordan du bruker CSS3-egenskapens bakgrunnsstørrelse å strekke bilder for å passe i et vindu, men det er en enda bedre og mer nyttig måte å distribuere for denne eiendommen. For å gjøre dette vil vi bruke følgende kombinasjon av eiendom og verdi:

bakgrunnsstørrelse: omslag; 

Omslagsnøkkelordegenskapen forteller nettleseren å skalere bildet slik at det passer til vinduet, uavhengig av hvor stort eller lite vinduet blir. Bildet er skalert for å dekke hele skjermen, men de originale proporsjonene og størrelsesforholdet holdes intakte, og forhindrer at selve bildet blir forvrengt. Bildet er plassert i vinduet så stort som mulig slik at hele vindusflaten er dekket. Dette betyr at du ikke vil ha noen blanke flekker på siden din eller noen forvrengning på bildet, men det også betyr at noe av bildet kan beskjæres avhengig av skjermformatet og bildet i spørsmål. For eksempel kan kantene på et bilde (enten topp, bunn, venstre eller høyre) kuttes av på bildene, avhengig av hvilke verdier du bruker for bakgrunnsposisjonsegenskapen. Hvis du orienterer bakgrunnen til "øverst til venstre", vil overskudd på bildet komme fra bunnen og høyre side. Hvis du sentrerer bakgrunnsbildet, vil overskuddet komme av fra alle sidene, men siden det overskytende er spredt, vil effekten på den ene siden være mindre tjent.

Slik bruker du 'bakgrunnsstørrelse: omslag;'

Når du oppretter bakgrunnsbildet ditt, er det lurt å lage et bilde som er ganske stort. Mens nettlesere kan gjøre et bilde mindre uten en merkbar innvirkning på den visuelle kvaliteten, når en nettleser skalerer opp et bildet til en størrelse som er større enn de originale dimensjonene, vil den visuelle kvaliteten bli svekket og bli uskarp og pixlet. Ulempen med dette er at siden din får et ytelseshit når du leverer gigantiske bilder til alle skjermer. Når du gjør dette, må du sørge for å gjøre det riktig forbered bildene for nedlastingshastighet og levering av nettet. Til slutt må du finne det lykkelige mediet mellom en stor nok bildestørrelse og kvalitet og en rimelig filstørrelse for nedlastingshastigheter.

En av de vanligste måtene å bruke skalering av bakgrunnsbilder er når du vil at bildet skal ta opp hele bakgrunnen til en side, om siden er bred og blir sett på en stasjonær datamaskin eller mye mindre og blir sendt til en håndholdt, mobil enheter.

Last opp bildet ditt til webhotellet og legg det til CSS som bakgrunnsbilde:

bakgrunnsbilde: url (fyrverkeri-over-wdw.jpg);
bakgrunn-gjenta: nei-gjenta;
bakgrunn-posisjon: sentrum sentrum;
bakgrunn-vedlegg: fast;

Legg til nettleserprefikset CSS først:

-webkit-bakgrunn-størrelse: omslag;
-moz-bakgrunn-størrelse: omslag;
-o-bakgrunn-størrelse: omslag;

Deretter legger du til CSS-egenskapen:

bakgrunnsstørrelse: omslag; 

Bruke forskjellige bilder som passer til forskjellige enheter

Mens responsiv design for en stasjonær eller en bærbar PC-opplevelse er viktig, er det mange forskjellige enheter som har tilgang til nettet har vokst betydelig, og et større utvalg av skjermstørrelser følger med at.

Som tidligere nevnt er det for eksempel ikke et effektivt eller båndbreddebevisst design å laste inn et veldig stort responsivt bakgrunnsbilde på en smarttelefon.

Lær hvordan du kan bruke mediespørsmål for å vise bilder som vil være passende for enhetene de vises på, og ytterligere forbedre nettstedets kompatibilitet med mobile enheter.

instagram story viewer