Hoe geef je je website een foto als achtergrond?

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:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -10;
background-image: url(https://de-help-desk.nl/images/faq/webdesign/images/heuvels.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: left top;
background-color: lightblue;
}

Uitleg van deze code:

• body:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -10;
}

  Ik voeg met dit element een extra laag aan de webpagina toe, die ónder de body komt te liggen. Dit element bevat verder geen inhoud (content: "";), maar omvat wel het hele scherm (display: block; width: 100%; height: 100%;).

  De positie van dit blok is vast, de linkerbovenhoek ervan bevindt zich altijd links bovenaan het beeldscherm (position: fixed; left: 0; top: 0;).

  En ten slotte komt alle inhoud van deze pagina er altijd bovenop te liggen; er is niets wat ónder de laag komt te liggen, en daardoor niet zichtbaar is. De regel z-index: -10; zorgt daarvoor. Hoe lager de waarde achter z-index, hoe lager de laag komt te liggen. Dus zo kun je in html lagen bovenop elkaar stapelen. Een waarde van -10 is meestal genoeg om een laag helemaal onderaan te plaatsen.

• background-image: url(https://de-help-desk.nl/images/faq/webdesign/heuvels.jpg);

  Achter background-image komt de locatie te staan van de afbeelding die je wilt laten zien. 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-repeat: no-repeat;
  In deze regel wordt aangegeven dat deze afbeelding niet in horizontale of verticale richting herhaald mag worden om het scherm te vullen, maar dat hij maar één keer weergegeven mag worden. en dat de linkerbovenhoek van de afbeelding samen moet vallen met de linkerbovenhoek van het scherm (left top).

• background-size: cover;
  Met deze regel leg je de background-size vast van je afbeelding. De waarde die je daarachter zet, is cover. Deze instelling heeft tot gevolg dat je foto de complete achtergrond van je pagina vult.

• background-position: left top;
  De linkerbovenhoek van de afbeelding wordt standaard in de linkerbovenhoek van het beeldscherm geplaatst. Maar bestaat het bovenste gedeelte van je foto bijvoorbeeld uit lucht, dan zie je misschien liever dat de rechteronderhoek van je foto in de rechteronderhoek van het beeldscherm wordt neergezet. Dat kun je doen met deze eigenschap. Je kunt de woorden: right, left, top, bottom en center gebruiken om je foto te positioneren. De eerste waarde die je opgeeft heeft altijd betrekking op de positie langs de horizontale as, de tweede op de positie langs de verticale as.

• background-color: lightblue;
  Ten slotte wordt er meestal ook nog een achtergrondkleur opgegeven. Dat lijkt onzinnig, omdat een achtergrondafbeelding altijd bovenop de achtergrondkleur wordt vertoond, maar als deze achtergrondafbeelding om de een of andere reden niet geladen kan worden, dan wordt in ieder geval de achtergrondkleur nog vertoond, en ziet je website er niet al te kleurloos uit.