Schaalbare achtergrond afbeelding

Het maken van een schaalbare achtergrond is tegenwoordig meer standaard dan uitzondering. In deze post ga ik je laten zien hoe je je schaalbare achtergrondafbeelding maakt waarbij je tevens let op de verhoudingen van de afbeelding.

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.