Schaalbare achtergrond afbeelding

Het maken van een schaalbare achtergrond is tegenwoordig meer standaard dan uitzondering. Echter, een achtergrond afbeelding kan netjes schaalbaar zijn maar helaas toch uit verhouding. In deze post ga ik je niet vertellen hoe je je achtergrondafbeelding schaalbaar maakt maar wel waar je op kunt letten om te voorkomen dat je afbeelding toch te klein wordt voor je site zoals op de afbeelding hieronder gebeurt. Het rode vlak is de gewone achtergrondkleur van de body.

Voorbeeld van een achtergrond afbeelding welke qua verhouding niet past in de site.

De achtergrond afbeelding wordt in de breedte netjes geschaald maar dit heeft tot gevolg dat deze in de hoogte te klein is.

 

De afbeelding schaalt horizontaal netjes mee maar komt dan verticaal ruimte te kort. Door in je stylesheet aan te geven dat het background-attachement fixed moet zijn los je dit op:

body{
background:#000 url(“lightening_clouds.jpg”) no-repeat top left;
background-size:cover;
background-attachment: fixed;
}

Je afbeelding zal dan schalen daar waar het mogelijk is en wanneer de afbeelding dan niet meer past, zal deze niet meer mee schalen maar eventueel dan afbreken;

background-attachment fixed en background-size cover

Door background-size cover en background-position op fixed te zetten in je CSS past de achtergrond afbeelding netjes.