Titta på populära webbplatser idag och en designbehandling som du är säker på att se är stora, skärmspänna 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 responsiv webbdesign.
Eftersom din webbplats layout ändras och skalar med olika skärmstorlekar, så måste också dessa bakgrundsbilder skala deras storlek i enlighet därmed. Faktum är att dessa "flytande bilder" är en av de viktigaste delarna av mottagliga webbplatser (tillsammans med ett fluidnät och mediasökningar). De tre delarna har varit en häftig webbdesign från början, men det har alltid varit ganska lätt att lägga till responsiva inline-bilder på en webbplats (inlinebilder är grafiken som kodas som en del av HTML-markupen). Samma med bakgrundsbilder (som är utformade på sidan med hjälp av CSS-bakgrundsegenskaper) har länge gett en stor 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 jag hur man använder egenskapen CSS3 background-storlek att sträcka bilder för att passa i ett fönster, men det finns ett ännu bättre, mer användbart sätt att distribuera för den här egenskapen. För att göra detta använder vi följande egenskaps- och värdekombination:
bakgrundsstorlek: omslag;
De omslag Sökordsegenskapen berättar att webbläsaren ska skala bilden så att den passar fönstret, oavsett hur stort eller litet det fönstret får. Bilden är skalad för att täcka hela skärmen, men de ursprungliga proportionerna och bildförhållandet hålls intakta, vilket förhindrar att bilden blir förvrängd. Bilden placeras i fönstret så stor som möjligt så att hela fönstersytan är täckt. Det betyder att du inte kommer att ha några tomma fläckar på din sida eller någon snedvridning på bilden, men det betyder också att en del av bilden kan trimmas av beroende på bildskärmens bildförhållande och den aktuella bilden. Exempelvis kan kanterna på en bild (antingen topp, botten, vänster eller höger) avskuras på bilderna, beroende på vilka värden du använder för egenskapen bakåtposition. Om du orienterar bakgrunden till "vänster till vänster" kommer eventuellt överskott på bilden utifrån och nedåt. Om du centrerar bakgrundsbilden kommer överskottet att komma bort från alla sidor, men eftersom ö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 märkbar inverkan på visuell kvalitet, när en webbläsare scales upp en bild till en storlek som är större än originalets dimensioner, kommer den visuella kvaliteten att försämras, bli suddig och pixelerad. Nackdelen med detta är att din sida tar en prestationsfaktor när du levererar jätte bilder till alla skärmar. När du gör detta, se till att du förbereder dem korrekt för nedladdningshastighet och webbleverans. I slutändan måste du hitta det glada mediumet mellan en stor nog bildstorlek och kvalitet och en rimlig filstorlek för nedladdningshastigheter.
Ett av de vanliga sätten att använda skalningsbakgrundsbilder är när du vill att den bilden ska ta upp hela bakgrunden på en sida, oavsett om den 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 en bakgrundsbild:
bakgrundsbild: url (fyrverkerier-över-wdw.jpg);background-repeat: no-repeat;bakgrundsställning: center center;bakgrundsbeslut: fast;
Lägg till webbläsarens prefixade CSS först:
-webkit-bakgrundsstorlek: omslag;-moz-background-size: cover;-o-background-size: cover;
Lägg sedan till CSS-egenskapen:
bakgrundsstorlek: omslag;
Använda olika bilder som passar olika enheter
Även om lyhörd design för en skrivbords- eller bärbar datorupplevelse är viktig, har olika enheter som kan komma åt webben växt betydligt, och en större mängd skärmstorlekar kommer med det.
Som tidigare nämnts är det inte en effektiv eller bandbreddskänslad design att ladda en mycket stor responsiv bakgrundsbild på en smartphone.
Läs om hur du kan använda mediasökningar för att visa bilder som är lämpliga för de enheter som de ska visas på, och ytterligare förbättra din webbplatss kompatibilitet med mobila enheter.
