Se på populære nettsteder i dag, og en designbehandling som du sikkert vil se er store, skjermspenner bakgrunnsbilder. En av utfordringene med å legge til disse bildene kommer fra den beste praksisen at nettsteder må svare på forskjellige skjermstørrelser og enheter - en tilnærming kjent som responsivt webdesign.
Siden nettstedets layout endres og skaleres med forskjellige skjermstørrelser, må også disse bakgrunnsbildene skalere størrelsen tilsvarende. Faktisk er disse "væskebildene" en av de viktigste delene av lydhørige nettsteder (sammen med et fluidnett og medieforespørsler). Disse tre stykkene har vært en stift av lydhør webdesign siden begynnelsen, men mens det alltid har vært ganske enkelt å legge til responsive inlinebilder på et nettsted (inlinebilder er grafikken som er kodet som en del av HTML-oppslaget), gjør du 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 utviklere av frontendene. Heldigvis har tillegget av egenskapen "bakgrunnsstørrelse" i CSS gjort det mulig.
I en egen artikkel dekket jeg hvordan du bruker CSS3-eiendommen background-size å strekke bilder for å passe inn i et vindu, men det er en enda bedre, mer nyttig måte å distribuere for denne egenskapen. For å gjøre dette, bruker vi følgende egenskaps- og verdikombinasjon:
bakgrunnsstørrelse: deksel;
De dekke søkeordegenskap forteller nettleseren å skalere bildet slik at det passer vinduet, uansett hvor stort eller lite det vinduet kommer. Bildet skaleres for å dekke hele skjermen, men den opprinnelige proporsjonen og størrelsesforholdet holdes intakt, slik at bildet ikke blir forvrengt. Bildet er plassert i vinduet så stort som mulig, slik at hele vinduets overflate er dekket. Dette betyr at du ikke vil ha noen tomme flekker på siden din eller forvrengning på bildet, men det betyr også at noen av bildene kan trimmes avhengig av bildeforholdet på skjermen og bildet i spørsmålet. For eksempel kan kantene på et bilde (enten øverst, nederst, venstre eller høyre) bli avskåret på bildene, avhengig av hvilke verdier du bruker til bakgrunnsstatusegenskapen. Hvis du orienterer bakgrunnen til "øverst til venstre", kommer overskudd på bildet ut av bunnen og til høyre. Hvis du senterer bakgrunnsbildet, vil overskuddet komme av alle sidene, men siden overskuddet er spredt, vil virkningen på en side være mindre tjene.
Hvordan å bruke bakgrunnsstørrelse: deksel;
Når du lager ditt bakgrunnsbilde, er det en god ide å lage et bilde som er ganske stort. Mens nettlesere kan gjøre et bilde mindre uten en merkbar innvirkning på visuell kvalitet, når en nettleser skalerer et bilde til en størrelse som er større enn det opprinnelige dimensjonene, vil den visuelle kvaliteten bli forringet, bli sløret og pixelert. Ulempen med dette er at siden din tar en ytelse hit når du leverer gigantiske bilder til alle skjermer. Når du gjør dette, må du sørge for å forberede disse bildene på riktig måte for nedlastingshastighet og weblevering. 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 vanlige måtene å bruke skaleringsbakgrunnsbilder er når du vil at bildet skal ta opp hele bakgrunnen til en side, om den siden er bred og blir vist på en stasjonær datamaskin eller mye mindre og blir sendt til en håndholdt, mobil enheter.
Last opp bildet ditt til webverten din og legg det til CSS som et bakgrunnsbilde:
bakgrunnsbilde: url (fyrverkeri-over-wdw.jpg);bakgrunn-gjentak: ikke-gjenta;bakgrunnsposisjon: senter senter;bakgrunnsbeslutning: fast;
Legg til nettleserens forhåndsdefinerte CSS først:
-webkit-bakgrunnsstørrelse: deksel;-moz-bakgrunnsstørrelse: deksel;-o-bakgrunnsstørrelse: deksel;
Legg deretter til CSS-egenskapen:
bakgrunnsstørrelse: deksel;
Bruke forskjellige bilder som passer til forskjellige enheter
Mens lydhør design for en stasjonær eller bærbar opplevelse er viktig, er det mange forskjellige enheter som kan få tilgang til nettet, og det kommer et større utvalg av skjermstørrelser.
Som tidligere nevnt, er det ikke et effektivt eller båndbreddebevisst design å laste inn et svært stort, responsivt bakgrunnsbilde på en smarttelefon.
Lær hvordan du kan bruke medieforespørsler til å vise bilder som passer til enhetene de skal vises på, og ytterligere forbedre nettstedets kompatibilitet med mobilenheter.
