headershadow

Latest Blogposts

CSS – Een achtergrond mee laten schalen met de grootte

Wanneer je een mooie achtergrond hebt is het de moeite waard dat deze qua grootte mee schaalt met de grootte van de browser. Staat deze klein ingesteld, dan is je afbeelding ook klein en is de browser groot geopend, dan is de afbeelding als het ware meegegroeit.

Wat je jezelf moet realiseren is dat een dergelijke afbeelding best een behoorlijk formaat moet hebben wil je deze ook in grote browserformaten ook mooi laten weergeven.

Er zijn inmiddels genoeg gebruikers die hun scherm al op een formaat van 1920×1080 hebben en daar zul je wellicht dus rekening mee willen houden.

Grote afbeeldingen

Het laden van een dergelijke afbeelding kost wat bandbreedte. Het is dus zaak om de grootte qua KB’s beperkt te houden. Want je wilt uiteindelijk geen heel pixelige achtergrond.

Een achtergrond instellen

Allereerst bepaal je de achtergrond met de volgende code:

html {
  background-image: url(bg-image.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

De 5e regel is om de achtergrond vast te zetten als je scrolt. De achtergrond scrolt in dat geval niet mee als de inhoud van de pagina groter wordt. Deze instelling gebruik je dus wanneer je een achtergrond maakt voor het hele scherm.

We koppelen deze CSS aan de selector HTML. Het is van toepassing voor het hele document.

CSS3 eigenschap ‘cover’

Nu komen we aan de nieuwe onderdelen toe waarmee de achtergrond wordt geplaatst in de hele browser grootte. Dit doen we met de CSS3 eigenschap ‘cover’. Voor de verschillende browsers worden nu nog verschillende regels gebruikt.

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
background-size: cover;

Wil je meer lezen over de verschillende browsers, lees dan een eerder artikel hierover eens: HTML5 en CSS3.

Hou er rekening mee dat de oudere browsers niet kunnen omgaan met de ‘cover’ van de achtergrond. Door het geheel te centreren kan dat een overkomelijk probleem zijn. Hou er echter wel rekening mee.

Het resultaat (klik op de afbeelding voor de werkende versie, afhankelijk van je browser):
CSS kleine browser CSS grote browser

5 reacties op “CSS – Een achtergrond mee laten schalen met de grootte


Comment author said

Door Kees op 17 maart 2012 om 18:36

Er is een trucje om het toch in alle versies van Internet Explorer te laten werken.

Voeg deze regels toe (met de juiste link naar het plaatje) en het werkt perfect in IE7, 8 en 9 (IE6 weet ik niet):
<pre>filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='plaatje.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='plaatje.jpg', sizingMethod='scale')";</pre>

Ik heb het zelf op een productie website gebruikt en het werkt echt stukken beter dan een Javascript-based methode.

 

Comment author said

Door Michaël op 19 maart 2012 om 10:20

Hoe maak je dit valid? Want echt goedkeuren doet hij niet…

 

Comment author said

Door Waldio op 25 maart 2012 om 13:57

Michaël,

Ach, die validator moet je niet te strict nemen. Die validator kan nog geen CSS3 keuren, vandaar dat het fout gerekend wordt. Maar niks van aan trekken, de browsers weten wat het is en hoe ze het moeten gebruiken en dan moet die validator niet teveel zeuren.

En voor veel meer technieken: http://css-tricks.com/perfect-full-page-background-image/

 

Comment author said

Door Mary op 9 december 2012 om 10:31

background-size: 100% werkt toch ook prima? Wat is precies het verschil dan? Cover vult het helemaal op? Dan heb je het hele plaatje niet als je kijkt op een mobieltje…

 

Plaats een reactie

*