Wat te weten
- Voorkeursmethode: gebruik de CSS3-eigenschap voor: achtergrondformaat en zet het op Hoes.
- Alternatieve methode: gebruik de CSS3-eigenschap voor: achtergrondformaat ingesteld op 100% en achtergrondpositie ingesteld op centrum.
In dit artikel worden twee manieren uitgelegd om met CSS3 een achtergrondafbeelding uit te rekken zodat deze op een webpagina past.
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 Hoes.
div {
achtergrondafbeelding: url('achtergrond.jpg');
achtergrondformaat: omslag;
achtergrondherhaling: geen herhaling;
}
Bekijk dit voorbeeld ervan in actie. Hier is de HTML in de onderstaande afbeelding.
Kijk nu eens naar de CSS. Het is niet veel anders dan de code hierboven. Er zijn een paar toevoegingen om het duidelijker te maken.
Dit is nu het resultaat op volledig scherm.
Door instelling achtergrondformaat naar Hoes, garandeert u dat browsers de achtergrondafbeelding, hoe groot ook, automatisch schalen om het hele gebied van het HTML-element waarop deze wordt toegepast, te bestrijken. Kijk eens naar een smaller venster.
Volgens caniuse.com, wordt deze methode door meer dan 90 procent van de browsers ondersteund, waardoor het in de meeste situaties een voor de hand liggende keuze is. Het veroorzaakt wel wat problemen met Microsoft-browsers, dus een fallback kan nodig zijn.
De terugval manier
Hier is een voorbeeld dat een achtergrondafbeelding gebruikt voor de hoofdtekst van een pagina en de grootte instelt op 100% zodat het altijd zal uitrekken om op het scherm te passen. Deze methode is niet perfect, en het kan wat onbedekte ruimte veroorzaken, maar door de achtergrondpositie property, zou u het probleem moeten kunnen oplossen en toch oudere browsers kunnen gebruiken.
lichaam {
achtergrond: url('bgimage.jpg');
achtergrondherhaling: geen herhaling;
achtergrondgrootte: 100%;
achtergrondpositie: midden;
}
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.