Kijk vandaag naar populaire websites en een ontwerpbehandeling die u zeker zult zien, is grote achtergrondafbeeldingen op het scherm. Een van de uitdagingen bij het toevoegen van deze afbeeldingen komt voort uit de beste praktijk dat websites moeten reageren op verschillende schermformaten en apparaten - een benadering die bekend staat als responsive webdesign.
Aangezien de lay-out van uw website verandert en schalen met verschillende schermformaten, moeten ook deze achtergrondafbeeldingen hun grootte overeenkomstig aanpassen. In feite zijn deze "vloeiende beelden" een van de belangrijkste onderdelen van responsieve websites (samen met een vloeiend raster en mediaquery's). Deze drie stukken zijn al sinds het begin een basis van responsief webontwerp, maar hoewel het altijd vrij eenvoudig was om responsieve inline-afbeeldingen aan een site toe te voegen (inline-afbeeldingen zijn de afbeeldingen die zijn gecodeerd als onderdeel van de HTML-markering), hetzelfde met achtergrondafbeeldingen (die op de pagina zijn gestyled met behulp van CSS-achtergrondeigenschappen) heeft al lang een belangrijke uitdaging opgeleverd voor veel webontwerpers en front-end ontwikkelaars. Gelukkig heeft de toevoeging van de eigenschap "background-size" in CSS dit mogelijk gemaakt.
In een afzonderlijk artikel behandelde ik hoe ik de CSS3-eigenschap moest gebruiken background-size om afbeeldingen uit te rekken om in een venster te passen, maar er is een nog betere, meer nuttige manier om voor deze eigenschap in te zetten. Hiervoor gebruiken we de volgende combinatie van eigenschap en waarde:
achtergrondformaat: omslag;
De deksel keyword eigenschap vertelt de browser om de afbeelding aan te passen aan het venster, ongeacht hoe groot of klein dat venster wordt. Het beeld wordt geschaald om het hele scherm te dekken, maar de oorspronkelijke verhoudingen en beeldverhouding worden intact gehouden, waardoor wordt voorkomen dat het beeld zelf wordt vervormd. Het beeld wordt zo groot mogelijk in het venster geplaatst, zodat het hele vensteroppervlak bedekt is. Dit betekent dat u geen lege plekken op uw pagina of enige vervorming van de afbeelding zult hebben, maar het betekent ook dat een deel van de afbeelding kan worden bijgesneden afhankelijk van de beeldverhouding van het scherm en de afbeelding in kwestie. De randen van een afbeelding (boven, onder, links of rechts) kunnen bijvoorbeeld worden afgekapt op de afbeeldingen, afhankelijk van de waarden die u gebruikt voor de eigenschap background-position. Als u de achtergrond naar "linksboven" oriënteert, wordt het eventuele overschot op de afbeelding van de onderkant en de rechterkant verwijderd. Als u de achtergrondafbeelding centreert, komt het overschot van alle kanten los, maar omdat dat overschot wordt verspreid, zal de impact aan een kant minder worden.
Hoe te gebruiken achtergrondformaat: omslag;
Bij het maken van uw achtergrondafbeelding is het een goed idee om een afbeelding te maken die vrij groot is. Hoewel browsers een afbeelding kleiner kunnen maken zonder een merkbare impact op de visuele kwaliteit, zal een browser een afbeelding opschalen tot een formaat dat groter is dan de originele afmetingen, waardoor de beeldkwaliteit minder wordt en wazig en korrelig wordt. Het nadeel hiervan is dat je pagina een performance hit krijgt wanneer je gigantische afbeeldingen op alle schermen aflevert. Wanneer u dit doet, moet u ervoor zorgen dat u deze afbeeldingen goed voorbereidt op downloadsnelheid en weblevering. Uiteindelijk moet je het gelukkige medium vinden tussen een voldoende grote afbeeldingsgrootte en -kwaliteit en een redelijke bestandsgrootte voor downloadsnelheden.
Een van de gebruikelijke manieren om achtergrondafbeeldingen te schalen, is wanneer u wilt dat die afbeelding de volledige achtergrond van een pagina beslaat, of die pagina breed is en wordt bekeken op een desktopcomputer of veel kleiner en wordt verzonden naar een mobiel apparaat. apparaten.
Upload uw afbeelding naar uw webhost en voeg deze toe aan uw CSS als achtergrondafbeelding:
achtergrondafbeelding: url (fireworks-over-wdw.jpg);achtergrondherhaling: geen herhaling;achtergrond-positie: middelpunt;achtergrond-bijlage: vast;
Voeg als eerste de door de browser vooraf gegeneerde CSS toe:
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
Voeg vervolgens de CSS-eigenschap toe:
achtergrondformaat: omslag;
Verschillende afbeeldingen gebruiken die geschikt zijn voor variërende apparaten
Hoewel een responsief ontwerp voor een desktop- of laptopervaring belangrijk is, is de verscheidenheid aan apparaten die toegang hebben tot internet aanzienlijk toegenomen, en een grotere verscheidenheid aan schermformaten.
Zoals eerder vermeld, is het laden van een zeer grote responsieve achtergrondafbeelding op een smartphone bijvoorbeeld geen efficiënt of bandbreedtebewust ontwerp.
Lees hoe u mediaquery's kunt gebruiken om afbeeldingen weer te geven die geschikt zijn voor de apparaten waarop ze worden weergegeven en om de compatibiliteit van uw website met mobiele apparaten verder te verbeteren.
