Maak een schaalbare achtergrond met CSS

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. Dit komt omdat de hoogte van de afbeelding in verhouding staat tot de breedte. Dus: indien de afbeelding smaller wordt dan wordt de hoogte korter. Dit wil je meestal niet. De meeste ontwerpers willen dat hun browser zelf bekijkt of de afbeelding nog verkleind kan worden en zo niet, dan hoeft er niets te gebeuren.

Opdrachten

Opdracht 1

Maak een webpagina met een schaalbare achtergrond. Gebruik de methode die hieronder beschreven is.

Opdracht 2

Onderzoek of dit ook zo werkt wanneer je het toepast op div elementen.

Tutorial

Zie  https://css-tricks.com/perfect-full-page-background-image/ voor een duidelijke (Engelstalige) tutorial.

Theorie

In dit voorbeeld heb ik een achtergrond afbeelding de waarde cover gegeven bij background-size. Dit zorgt er voor dat de afbeelding meeschaalt met de browserbreedte.

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

 

Echter, wanneer het scherm te smal wordt dan krijg ik een rood vlak onderin te zien. Dit rode vlak is de 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.

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.