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:

  1. html {
  2.   background-image: url(bg-image.jpg);
  3.   background-repeat: no-repeat;
  4.   background-position: center center;
  5.   background-attachment: fixed;
  6. }

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.

  1. -webkit-background-size: cover;
  2. -moz-background-size: cover;
  3. -o-background-size: cover;
  4. 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.

html en css voor beginnersWil jij ook leren hoe je je eigen website kunt maken?

Wil jij tips en tricks om zo goed mogelijk zelf met alles aan de slag te kunnen?
Meld je hieronder aan voor de HTML-site nieuwsbrief en krijg elke week handige tips om een website te bouwen.
En je ontvangt meteen mijn GRATIS ebook HTML & CSS voor Beginners.

5 reacties

  1. Kees schreef:

    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.

  2. Michaël schreef:

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

  3. Waldio schreef:

    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/

  4. Mary schreef:

    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…

  1. 7 januari 2013

    […] nieuwere trend in webdesign is het gebruik van pagina vullende afbeeldingen. Afbeeldingen die met behulp van een laag toch een bepaalde kleur krijgen. Zo kun je bijvoorbeeld […]

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.