Achtergrond uitrekken met CSS3
2 Mei 2011, door Heino Boekhout
Met de komst van CSS3 kan er met de eigenschap ‘background-size’ en de waarde ‘cover’ een achtergrond proportioneel uitgerekt worden, zodat deze het volledige venster bedekt. De afbeelding past zich dan automatisch aan de breedte of de hoogte van de pagina aan, zodat bij elke venstergrootte de achtergrond in verhouding blijft en optimaal wordt weergegeven.
Bovenstaande afbeeldingen van de webpagina in Safari op de iPad worden weergegeven door de volgende class:
.achtergrond{
background-size: cover;
background-image: url('achtergrond.jpg');
background-position: center center;
}
Deze class is in de html aan de body tag meegegeven door middel van <body class=“achtergrond”>. In het voorbeeld is de afbeelding zowel horizontaal als verticaal gecentreerd door de waarde ‘center center’ aan de eigenschap ‘background-position’ mee te geven. Wanneer deze eigenschap niet wordt opgenomen in de class, positioneert de browser de afbeelding linksboven.
Compatibiliteit
‘background-size:cover’ wordt ondersteund in FireFox vanaf versie 4, Chrome vanaf versie 4, Safari vanaf versie 5, Opera vanaf versie 10.53 en Internet Explorer vanaf versie 9.
Een alternatief voor deze CSS3 oplossing is de MooTools extensie FitImage, waarbij compatibiliteit is gewaarborgd voor de momenteel meestgebruikte- en een aantal gedateerde browsers.