Oprettelse af et skaleringsresponsivt baggrundsbillede

Se på populære websteder i dag, og en designbehandling, som du helt sikkert vil se, er store, skærmspændende baggrundsbilleder. En af udfordringerne ved at tilføje disse billeder kommer fra den bedste praksis, at websteder skal reagere på forskellige skærmstørrelser og enheder - en tilgang kendt som lydhør webdesign.

Et billede til mange skærme

Da dit websteds layout ændres og skaleres med forskellige skærmstørrelser, skal disse baggrundsbilleder også skalere deres størrelse i overensstemmelse hermed. Faktisk er disse "flydende billeder" et af nøgleelementerne på responsive websteder (sammen med et flydende gitter og medieforespørgsler). Disse tre stykker har været en hæfteklammer til responsivt webdesign siden starten, men mens det altid har været ret let at tilføje lydhør integrerede billeder til et websted (integrerede billeder er grafikken, der er kodet som en del af HTML-markeringen), hvilket gør det samme med baggrundsbilleder (som er stylet ind på siden ved hjælp af CSS baggrundsegenskaber) har længe givet en betydelig udfordring for mange webdesignere og frontend udviklere. Heldigvis har tilføjelsen af ​​egenskaben "baggrundsstørrelse" i CSS gjort dette muligt.

instagram viewer

I en separat artikel dækkede vi, hvordan du bruger CSS3-egenskabs baggrundsstørrelse at strække billeder, så de passer ind i et vindue, men der er en endnu bedre og mere nyttig måde at implementere på denne ejendom. For at gøre dette bruger vi følgende egenskabs- og værdikombination:

baggrundsstørrelse: omslag; 

Egenskaben omslags nøgleord fortæller browseren at skalere billedet, så det passer til vinduet, uanset hvor stort eller lille vinduet bliver. Billedet skaleres til at dække hele skærmen, men de originale proportioner og billedformat holdes intakte, hvilket forhindrer selve billedet i at blive forvrænget. Billedet er placeret i vinduet så stort som muligt, så hele vinduesoverfladen er dækket. Dette betyder, at du ikke har nogen tomme pletter på din side eller nogen forvrængning på billedet, men det også betyder, at noget af billedet kan trimmes af afhængigt af skærmformatet og billedet i spørgsmål. For eksempel kan kanterne på et billede (enten øverst, nederst, venstre eller højre) blive afskåret på billederne, afhængigt af hvilke værdier du bruger til baggrundspositionsegenskaben. Hvis du orienterer baggrunden til "øverst til venstre", vil overskydende på billedet komme fra bunden og højre side. Hvis du centrerer baggrundsbilledet, vil overskuddet komme ud af alle sider, men da det overskydende er spredt, vil påvirkningen på den ene side være mindre tjent.

Sådan bruges 'baggrundsstørrelse: omslag;'

Når du opretter dit baggrundsbillede, er det en god ide at oprette et billede, der er ret stort. Mens browsere kan gøre et billede mindre uden en mærkbar indflydelse på den visuelle kvalitet, når en browser skalerer op til en billede til en størrelse, der er større end dens originale dimensioner, vil den visuelle kvalitet blive forringet og blive sløret og pixeleret. Ulempen ved dette er, at din side får et præstationshit, når du leverer gigantiske billeder til alle skærme. Når du gør dette, skal du sørge for at gøre det korrekt forbered disse billeder til downloadhastighed og weblevering. I sidste ende skal du finde det glade medium mellem en stor nok billedstørrelse og kvalitet og en rimelig filstørrelse til downloadhastigheder.

En af de mest almindelige måder at bruge skalering af baggrundsbilleder er, når du vil have, at billedet skal tage den fulde baggrund af en side, om siden er bred og ses på en stationær computer eller meget mindre og sendes til en håndholdt, mobil enheder.

Upload dit billede til din webhost og tilføj det til din CSS som baggrundsbillede:

baggrundsbillede: url (fyrværkeri-over-wdw.jpg);
baggrund-gentagelse: ingen gentagelse;
baggrundsposition: centercenter;
baggrundsvedhæftning: fast;

Tilføj først det browserpræfikset CSS:

-webkit-baggrundsstørrelse: omslag;
-moz-baggrundsstørrelse: omslag;
-o-baggrundsstørrelse: omslag;

Tilføj derefter CSS-ejendommen:

baggrundsstørrelse: omslag; 

Brug af forskellige billeder, der passer til forskellige enheder

Mens responsivt design til en stationær eller en bærbar pc-oplevelse er vigtig, er det mange forskellige enheder der har adgang til internettet er vokset markant, og et større udvalg af skærmstørrelser følger med at.

Som tidligere nævnt er det f.eks. Ikke et effektivt eller båndbreddebevidst design at indlæse et meget stort responsivt baggrundsbillede på en smartphone.

Lær hvordan du kan bruge medieforespørgsler at vise billeder, der passer til de enheder, de vises på, og yderligere forbedre dit websteds kompatibilitet med mobile enheder.

instagram story viewer