Een achtergrondafbeelding uitrekken om op een webpagina te passen

Geef uw website visueel belang met achtergrondafbeeldingen

Wat te weten

• Voorkeursmethode: gebruik de CSS3-eigenschap voor: achtergrondformaat en zet het op omslag .
• Alternatieve methode: gebruik de CSS3-eigenschap voor: achtergrondformaat ingesteld op 100% en achtergrondpositie ingesteld op centrum.

In dit artikel worden twee manieren uitgelegd om een ​​achtergrondafbeelding uit te rekken zodat deze op een webpagina past met behulp van CSS3.

De moderne manier

Afbeeldingen zijn een belangrijk onderdeel van aantrekkelijk website ontwerpen . Ze voegen visueel belang toe aan een pagina en helpen u het ontwerp te bereiken waarnaar u op zoek bent. Wanneer u met achtergrondafbeeldingen werkt, wilt u misschien dat een afbeelding wordt uitgerekt om op de pagina te passen, ondanks de breed scala aan apparaten en schermformaten .

De beste manier om een ​​afbeelding uit te rekken zodat deze op de achtergrond van een element past, is door de CSS3 eigendom, voor achtergrondformaat , en stel het gelijk aan omslag .

|__+_|

Gebruik het voorbeeld van hierboven met de achtergrondformaat ingesteld op 100% in plaats daarvan kun je zien dat de CSS er grotendeels hetzelfde uitziet.

Het resultaat op een browser op volledig scherm of een browser met vergelijkbare afmetingen als de afbeelding is bijna identiek. Met een smaller scherm beginnen de gebreken echter te vertonen.

Het is duidelijk niet ideaal, maar het zal werken als een uitwijkmogelijkheid.

Volgens caniuse.com , deze eigenschap werkt in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ en in alle belangrijke mobiele browsers. Dit dekt u voor alle moderne browsers die tegenwoordig beschikbaar zijn, wat betekent dat u deze eigenschap moet gebruiken zonder bang te hoeven zijn dat het niet op iemands scherm zal werken.

Tussen deze twee methoden zou u geen problemen moeten hebben om bijna alle browsers te ondersteunen. Net zo achtergrondformaat: omslag nog meer aanvaard wordt door browsers, zal zelfs deze fallback overbodig worden. Het is duidelijk dat CSS3 en meer responsieve ontwerppraktijken het gebruik van afbeeldingen als adaptieve achtergronden binnen HTML-elementen hebben vereenvoudigd en gestroomlijnd.