Mijn-eigen-website.nl

Hoe krijg je een foto als achtergrond op je website?

De achtergrondafbeelding van deze pagina verschuift mee als je je browservenster groter of kleiner maakt.

Zoals je ziet, heb ik een foto – of beter gezegd, een illustratie – als achtergrond van deze website-pagina gebruikt. En als je je browservenster verkleint of vergroot, verschuift de afbeelding gewoon mee. Hoe maak je nu zoiets?

Je begint ermee een geschikte foto of illustratie te kiezen als achtergrond voor je site. Ik heb hier een vrij grote afbeelding genomen (1920 pixels breed bij 1113 pixels hoog), maar het bestandsformaat daarvan nog wel flink verkleind – hij is nu nog maar 115kb groot. Een foto van je eigen digitale camera is al gauw 1 Mb groot, en die moet je echt verkleinen voordat je hem als achtergrond kunt gebruiken, anders doen de browsers er straks veel te lang over om je pagina te laden. Het eerste wat je dus moet doen, is je afbeelding verkleinen.

Omdat ik mijn achtergrondfoto alleen op déze pagina wil laten zien, heb ik de html-code ervoor in een stijlblok in de head van deze pagina gezet. Als jij je achtergrondafbeelding op álle pagina's van je website wilt laten zien, dan kun je ze natuurlijk beter in je stylesheet zetten. In mijn stijlblok staat het volgende:

body {
background-image: url(http://www.mijn-eigen-website.nl/images/heuvels.jpg);
background-size: cover;
background-attachment: fixed;
}

background-image: url(http://www.mijn-eigen-website.nl/images/heuvels.jpg);
Achter background-image moet komen te staan waar de afbeelding die je wilt laten zien precies te vinden is. Ik heb deze afbeelding eerst op mijn server in de map images gezet, en hem daarna opgeroepen in mijn browser door die url in het adresvak van mijn browser te plakken. Zo kun je meteen controleren of de link goed is. Is je afbeelding in de browser te zien, dan kun je het adres uit de url-balk kopiëren en tussen de set ronde haken neerzetten.

background-size: cover;
De volgende regel is die waarin je de background-size vastlegt. De waarde die je daarachter zet, is cover. Deze instelling heeft tot gevolg dat je foto de complete achtergrond van je pagina vult. Maar omdat de ene webpagina korter of langer kan zijn dan de andere, zal je afbeelding op de ene pagina ook kleiner of groter weergegeven worden – hoe langer je pagina, hoe meer je afbeelding als het ware 'uitgerekt' moet worden om toch de hele achtergrond te kunnen vullen. Dat geeft natuurlijk een onrustig effect als je van de ene naar de andere pagina gaat, dus daarom komt er nog een derde opmaakeigenschap bij:

background-attachment: fixed;
Met deze instelling blijft de achtergrondfoto op zijn plaats en schuift de inhoud er als het ware overheen. De achtergrond blijft er op deze manier steeds hetzelfde uitzien, hoe lang of kort een webpagina ook is.

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid