CSS - Schaalbare achtergrond


Je komt het vast wel eens tegen, websites die een grote foto hebben ingesteld als achtergrond van de website die vervolgens mee kan schalen zodra je het venster gaat vergroten of verkleinen. Vaak wordt een schaalbare achtergrond ingesteld met behulp van bijvoorbeeld een jQuery script maar dit kan eventueel ook gewoon met CSS3.

Dit is in te stellen middels de onderstaande code waarbij er gebruikt wordt gemaakt van background-size, nieuw ge´ntroduceerd in CSS3. Met deze eigenschap kan er invloed uitgeoefend worden op de ingestelde achtergrond zoals bijvoorbeeld het opgeven van een afmeting. Zodoende kan de afbeelding ook schaalbaar gemaakt worden (cover).

Een demo van een schaalbare achtergrond met CSS bekijk je hier (nieuw venster).

body {
        background: url(background.jpg);
        background-attachment:fixed;
        background-repeat:no-repeat;
        background-position:center center;
        background-size:cover;
        background-color:#000;
}


Mocht je overigens de achtergrond een eigen formaat willen meegeven dan kun je percentages of pixels instellen, bijvoorbeeld background-size:100px 100px.

body {
        background: url(background.jpg);
        background-attachment:fixed;
        background-repeat:no-repeat;
        background-position:center center;
        background-size:100px 100px;
        background-color:#000;
}