Hoe zet ik een foto als achtergrond van een sectie (met overlay of gradient)?

Wat heb je nodig?

• Een liggende foto van ongeveer 1920 pixels breed, als JPG of WebP en het liefst kleiner dan 300 KB. Je website gebruikt voor een achtergrond één vast bestand, ook op een telefoon. Een te groot bestand maakt je pagina traag. Zie afbeeldingen uploaden in het juiste formaat.
• Een foto waarbij het belangrijkste in het midden staat: aan de randen valt op kleinere schermen iets weg.

Stap 1: Open Achtergrond afbeelding en kies een foto

1. Selecteer de sectie (klik op de rand, of kies Sectie in de lijstweergave).
2. Open rechts het paneel Achtergrond afbeelding.
3. Klik op Afbeelding selecteren en kies een foto uit de mediabibliotheek, of upload een nieuwe.

De foto staat nu achter je sectie. Met Wijzigen kies je een andere foto, met Verwijderen haal je hem weg.

Stap 2: Kies de Afbeelding layout

Zodra er een foto is gekozen, verschijnt de keuzelijst Afbeelding layout. Overal waar een kleur over de foto ligt, is dat de Achtergrond kleur van de sectie.

Volledige achtergrond

De foto vult de hele sectie, zonder laag eroverheen. Dit is de standaard. Mooi bij een rustige foto, maar tekst is er vaak slecht op te lezen.

Volledige achtergrond + Overlay

Over de foto ligt de sectiekleur, bijna dekkend. De foto schemert er nog door. Dit geeft de best leesbare tekst.

Volledige achtergrond + Links (50%) of Rechts (50%) Overlay

Over de linker- of rechterhelft ligt een lichte, donkere laag. Zet je tekst aan die kant. Deze laag is altijd zwart, niet de sectiekleur. Op mobiel ligt de laag over de hele breedte.

Volledige achtergrond + Gradient vanaf links, rechts, boven of onder

De sectiekleur loopt vanaf één rand uit naar doorzichtig. Aan die kant staat je tekst op kleur, aan de andere kant blijft de foto goed zichtbaar. Combineer vanaf boven met tekst bovenin en vanaf onder met tekst onderin (zie stap 3 en kolommen uitlijnen).

50% achtergrond + 50% kleur overlay (en andersom)

De foto vult één helft van de sectie, de andere helft heeft de sectiekleur. Bij 50% achtergrond + 50% kleur overlay staat de foto links; bij 50% kleur overlay + 50% achtergrond rechts. Zet je tekst in een kolom aan de kleurkant, bijvoorbeeld een lege kolom van 6 en een tekstkolom van 6. Op mobiel komt de foto onder de tekst, over de volle breedte.

Geen achtergrond

Met Geen achtergrond blijft de foto gekozen, maar wordt hij niet getoond. Handig om even te testen zonder de foto kwijt te raken.

Stap 3: Afbeelding uitlijning

Valt het belangrijkste deel van je foto weg? Met Afbeelding uitlijning bepaal je welk deel zichtbaar blijft als de foto wordt bijgesneden: Centreren (standaard), Boven of Onder. Kies Boven voor een foto met een gezicht bovenin.

Stap 4: Afbeelding tonen op mobiel

Bij Afbeelding tonen op mobiel kies je Afbeelding blijven tonen op mobiel of Afbeelding verbergen op mobiel. Verberg je hem, dan zien telefoonbezoekers alleen de sectiekleur. De foto wordt dan nog wel geladen, dus het maakt je pagina op mobiel niet sneller.

Lukt het niet?

• Je tekst is zwart op de foto: de sectie is wit. Kies een donkere Achtergrond kleur.
• De keuzelijst Afbeelding layout ontbreekt: je hebt nog geen foto gekozen. Hij verschijnt pas na Afbeelding selecteren.
• De foto is niet te zien: staat de layout op Geen achtergrond? Kies dan een andere layout.
• Een belangrijk deel van de foto valt weg: pas de Afbeelding uitlijning aan, of geef de sectie een andere hoogte (hoogte en ruimte aanpassen).
• De pagina laadt traag: de foto is te groot. Verklein hem tot ongeveer 1920 pixels breed. Lees ook waarom je website traag is.
• Je wilt bewegend beeld: gebruik een video als achtergrond.

Veelgestelde vragen