Kijk naar populaire websites van vandaag en een ontwerpbehandeling die u zeker zult zien, zijn grote, schermvullende achtergrondafbeeldingen. Een van de uitdagingen bij het toevoegen van deze afbeeldingen komt van de best practice dat websites moeten reageren op verschillende schermformaten en apparaten - een benadering die bekend staat als responsive webdesign.
Eén afbeelding voor veel schermen
Aangezien de lay-out van uw website verandert en wordt geschaald met verschillende schermformaten, moeten deze achtergrondafbeeldingen ook hun grootte dienovereenkomstig schalen. In feite zijn deze "vloeiende afbeeldingen" een van de belangrijkste onderdelen van responsieve websites (samen met een vloeiend raster en mediaquery's). Die drie onderdelen zijn sinds het begin een hoofdbestanddeel van responsive webdesign geweest, maar hoewel het altijd vrij eenvoudig is geweest om responsive toe te voegen inline-afbeeldingen naar een site (inline-afbeeldingen zijn de afbeeldingen die zijn gecodeerd als onderdeel van de HTML-opmaak), hetzelfde doen met achtergrondafbeeldingen (die zijn in de pagina gestileerd met behulp van CSS-achtergrondeigenschappen) is lange tijd een grote uitdaging geweest voor veel webontwerpers en front-end ontwikkelaars. Gelukkig heeft de toevoeging van de eigenschap "achtergrondgrootte" in CSS dit mogelijk gemaakt.
In een apart artikel hebben we besproken hoe u de Achtergrondgrootte CSS3-eigenschap om afbeeldingen uit te rekken zodat ze in een venster passen, maar er is een nog betere, nuttigere manier om deze eigenschap te implementeren. Om dit te doen, gebruiken we de volgende combinatie van eigenschap en waarde:
achtergrondformaat: omslag;
De eigenschap cover trefwoord vertelt de browser om de afbeelding te schalen zodat deze in het venster past, ongeacht hoe groot of klein dat venster wordt. Het beeld wordt geschaald om het hele scherm te bedekken, maar de oorspronkelijke verhoudingen en beeldverhouding blijven intact, waardoor wordt voorkomen dat het beeld zelf wordt vervormd. De afbeelding wordt zo groot mogelijk in het raam geplaatst zodat het gehele raamoppervlak bedekt is. Dit betekent dat u geen lege plekken op uw pagina of enige vervorming op de afbeelding zult hebben, maar het is ook betekent dat een deel van het beeld kan worden bijgesneden, afhankelijk van de hoogte-breedteverhouding van het scherm en het beeld in vraag. De randen van een afbeelding (boven, onder, links of rechts) kunnen bijvoorbeeld worden afgesneden op de afbeeldingen, afhankelijk van de waarden die u gebruikt voor de eigenschap background-position. Als u de achtergrond naar "linksboven" oriënteert, komt het teveel aan de afbeelding van de onder- en rechterkant af. Als u de achtergrondafbeelding centreert, komt het overschot van alle kanten af, maar aangezien dat overschot wordt uitgespreid, zal de impact aan één kant minder zijn.
Hoe 'achtergrondformaat: omslag;' te gebruiken
Wanneer u uw achtergrondafbeelding maakt, is het een goed idee om een afbeelding te maken die vrij groot is. Terwijl browsers een afbeelding kleiner kunnen maken zonder merkbare invloed op de visuele kwaliteit, wanneer een browser opschaalt en afbeelding groter wordt dan de oorspronkelijke afmetingen, zal de visuele kwaliteit afnemen, wazig worden en gepixeld. Het nadeel hiervan is dat uw pagina een prestatiehit krijgt wanneer u gigantische afbeeldingen op alle schermen levert. Wanneer u dit doet, zorg er dan voor dat u goed bereid die afbeeldingen voor op downloadsnelheid en webbezorging. Uiteindelijk moet je de gulden middenweg 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 inneemt, of die pagina breed is en wordt bekeken op een desktopcomputer of veel kleiner en wordt verzonden naar een handheld, mobiel apparaten.
Upload uw afbeelding naar uw webhost en voeg deze toe aan uw CSS als achtergrondafbeelding:
achtergrondafbeelding: url (vuurwerk-over-wdw.jpg);
achtergrondherhaling: geen herhaling;
achtergrondpositie: midden midden;
achtergrond-bijlage: vast;
Voeg eerst de browser-voorvoegsel CSS toe:
-webkit-achtergrondgrootte: omslag;
-moz-achtergrondgrootte: omslag;
-o-achtergrondgrootte: omslag;
Voeg vervolgens de CSS-eigenschap toe:
achtergrondformaat: omslag;
Verschillende afbeeldingen gebruiken die bij verschillende apparaten passen
Hoewel responsief ontwerp voor een desktop- of laptopervaring belangrijk is, is de verscheidenheid aan apparaten dat toegang heeft tot internet is aanzienlijk gegroeid, en er komt een grotere verscheidenheid aan schermformaten bij dat.
Zoals eerder vermeld, is het laden van een zeer grote responsieve achtergrondafbeelding op een smartphone bijvoorbeeld geen efficiënt of bandbreedtebewust ontwerp.
Leer hoe u kunt gebruiken mediaquery's 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.