Titta på populära webbplatser idag och en designbehandling som du säkert kommer att se är stora, skärmspännande bakgrundsbilder. En av utmaningarna med att lägga till dessa bilder kommer från bästa praxis att webbplatser måste svara på olika skärmstorlekar och enheter - ett tillvägagångssätt som kallas lyhörd webbdesign.
En bild för många skärmar
Eftersom din webbplats layout ändras och skalas med olika skärmstorlekar, måste också dessa bakgrundsbilder skala deras storlek därefter. I själva verket är dessa "flytande bilder" en av de viktigaste delarna av responsiva webbplatser (tillsammans med ett flytande rutnät och mediefrågor). Dessa tre delar har varit en häftklammer för lyhörd webbdesign sedan början, men det har alltid varit ganska lätt att lägga till lyhörd inline-bilder till en webbplats (inline-bilder är den grafik som kodas som en del av HTML-markeringen), vilket gör detsamma med bakgrundsbilder (som är utformade på sidan med CSS-bakgrundsegenskaper) har länge gett en betydande utmaning för många webbdesigners och frontend utvecklare. Tack och lov har tillägget av egenskapen "bakgrundsstorlek" i CSS gjort det möjligt.
I en separat artikel behandlade vi hur man använder CSS3-egenskapens bakgrundsstorlek att sträcka bilder så att de passar i ett fönster, men det finns ett ännu bättre och mer användbart sätt att distribuera för den här egenskapen. För att göra detta använder vi följande egenskap och värdekombination:
bakgrundsstorlek: omslag;
Egenskapen omslagsnyckelord berättar webbläsaren att skala bilden så att den passar fönstret, oavsett hur stort eller litet fönstret blir. Bilden skalas så att den täcker hela skärmen, men de ursprungliga proportionerna och bildförhållandet hålls intakta, vilket förhindrar att själva bilden förvrängs. Bilden placeras i fönstret så stort som möjligt så att hela fönsterytan täcks. Det betyder att du inte kommer att ha några tomma fläckar på din sida eller någon förvrängning på bilden, men det kommer också innebär att en del av bilden kan klippas av beroende på bildförhållandet för skärmen och bilden i fråga. Till exempel kan kanterna på en bild (antingen uppe, nedre, vänster eller höger) klippas av på bilderna, beroende på vilka värden du använder för bakgrundspositionsegenskapen. Om du orienterar bakgrunden till "uppe till vänster" kommer eventuellt överskott på bilden att komma från botten och höger. Om du centrerar bakgrundsbilden kommer överskottet att lossna från alla sidor, men eftersom det överskottet sprids ut kommer påverkan på någon sida att vara mindre tjäna.
Hur man använder 'bakgrundsstorlek: omslag;'
När du skapar din bakgrundsbild är det en bra idé att skapa en bild som är ganska stor. Medan webbläsare kan göra en bild mindre utan någon märkbar inverkan på den visuella kvaliteten, när en webbläsare skalar upp en bilden till en storlek som är större än dess ursprungliga dimensioner, kommer den visuella kvaliteten att försämras, blir suddig och pixlat. Nackdelen med detta är att din sida tar en prestationshit när du levererar jättebilder till alla skärmar. När du gör detta, se till att ordentligt förbereda bilderna för nedladdningshastighet och webbleverans. I slutändan måste du hitta det lyckliga mediet mellan en tillräckligt stor bildstorlek och kvalitet och en rimlig filstorlek för nedladdningshastigheter.
Ett av de vanligaste sätten att använda skalning av bakgrundsbilder är när du vill att bilden ska ta upp hela sidans bakgrund, om sidan är bred och visas på en stationär dator eller mycket mindre och skickas till en handhållen mobil enheter.
Ladda upp din bild till din webbhotell och lägg till den i din CSS som bakgrundsbild:
bakgrundsbild: url (fyrverkeri-över-wdw.jpg);
bakgrundsupprepning: ingen upprepning;
bakgrundsposition: mittcentrum;
bakgrundsbilaga: fast;
Lägg till webbläsarens prefix CSS först:
-webkit-bakgrundsstorlek: omslag;
-moz-bakgrundsstorlek: omslag;
-o-bakgrundsstorlek: omslag;
Lägg sedan till CSS-egenskapen:
bakgrundsstorlek: omslag;
Använda olika bilder som passar olika enheter
Även om responsiv design för en stationär eller en bärbar datorupplevelse är viktig, är det många olika enheter som kan komma åt webben har ökat betydligt, och ett större utbud av skärmstorlekar kommer med det där.
Som tidigare nämnts är att ladda en mycket stor responsiv bakgrundsbild på en smartphone till exempel inte en effektiv eller bandbreddsmedveten design.
Lär dig hur du kan använda mediefrågor att visa bilder som passar de enheter de kommer att visas på och ytterligare förbättra din webbplats kompatibilitet med mobila enheter.