Achtergronden

Achtergrond kleur of beeld

• Open de PAGINA INSTELLINGEN (via de paarse balk bovenin of via de paarse button achter de pagina in het overzicht) en scroll naar het onderdeel AChtergrond
• Een achtergrondkleur; klik in het veld met het kleurnummer (bijv #fff333), de colorpicker wordt geopend en je kunt een nieuwe kleur aanwijzen, het nieuwe kleurnummer wordt in het veld geplaatst. Als je beschikt over de juiste kleuren in hexadeciamalen dan kun je ook direct het nummer in het veld plakken. Wanneer je het veld leeg laat zal de achtergrond wit worden.
• Een achtergrondafbeelding invoegen, wijzigen of verwijderen;
  Klik op de paarse knop "Media toevoegen" of eerst op Verwijderen als je een afbeelding wilt vervangen.
  De media manager wordt nu geopend. Kies een bestaande foto of upload eigen beeld via "bestand kiezen" bovenaan. 
  Meer informatie over de media manager en het uploaden van foto's lees je hier. 
• Een achtergrondvideo: Voeg een mp4 bestand (van max. 64Mb) toe als achtergrondvideo. de achtergrondvideo is voor sfeer, er wordt geen geluid afgespeeld.
  Voor een informatieve video met geluid kun je beter een content-blok Video op de pagina toevoegen. Hiervoor kun je zowel een mp4 bestand als een Youtube link gebruiken. Lees meer over het content-blok video op deze pagina.
  Een voorbeeld van een pagina met een achtergrondvideo uit de standaard templates
  Je hoeft niet altijd de achtergrondvideo te tonen in de header. Je kunt dat ook op een ander deel in de pagina doen. Bijvoorbeeld in een strook met een streamer eroverheen zoals in dit voorbeeld.

Instellingen

Onderstaande instellingen hebben alleen betrekking op de achtergrondafbeelding.
Als je de achtergrond afbeelding hebt toegevoegd kun je kijken of je nog iets moet wijzigen aan de instellingen, soms zijn de standaard-instellingen al goed, maar is een andere instelling beter bij het onderwerp van de foto.

• Achtergrondafbeelding gedrag:
  Scroll: de afbeelding scrollt mee met de content, na scrollen is de afbeelding uit beeld. Bekijk een voorbeeld
  Fixed: De afbeelding blijft staan, de content scrollt over de foto. De foto blijft altijd in beeld tenzij er conten overheen scrollt met een achtergrondkleur, deze verbergt dan de achtergrondfoto. Bekijk een voorbeeld
  De standaard-instelling is fixed.
  De opties local, initial en inherit tonen hetzelfde als scroll.
• Achtergrond herhaling:
  Repeat: Dit gebruik je wanneer je achtergrondbeeld in een patroon wilt herhalen. Vul bij de Achtergrondafmeting een waarde in voor de breedte van de afbeelding, bijv: 20% auto. Bekijk een voorbeeld
  Repeat-x / Repeat-y: herhaling van het beeld alleen horizontaal (x) of alleen verticaal (y)
  No-repeat: geen herhaling, het beeld wordt maar 1x getoond. Dit is de instelling als je een beeldvullende achtergrondfoto wilt.

Afmeting en positie

• Achtergrond-afmeting: plaats in dit veld 2 waarden, breedte en hoogte, met een spatie er tussen. Wil je de verhoudingen bewaren gebruik dan bij een van de 2 waarden "auto" (in de meeste gevallen gebruik je auto want je wilt de foto niet vervormen).
  Bijv 100% auto - de afbeelding wordt 100% breed en de hoogte van de afbeelding wordt automatisch in de juiste verhouding.
• Achtergrond-positie: hiermee bepaal je de uitlijning van de foto op de pagina. De uitlijning horizontaal (x) Center en verticale uitlijning (y) Top zijn als standaard waarden ingevuld en vaak goed.
  • Achtergrondpositie-x: de uitlijning horizontaal; Left, Center of Right.
    Als de Achtergrond afmeting op 100% auto (100% breed) staat zal je geen verschil zien in de verschillende opties. Wel als de breedte minder ingesteld is als 100%.
    Laat je dit veld leeg dan ontstaat een horizontaal parallax effect; de afbeelding beweegt horizontaal wanneer je omlaag scrollt, zet de achtergrond-herhaling op repeat-x. Bekijk een voorbeeld van horizontale paralax
  • Achtergrondpositie-y: de uitlijning verticaal; Top, Center, Bottom
    Als het onderwerp op de foto wat ver naar onderen staat zou je de y-positie op Center kunnen zettten. De foto schuift dan iets meer naar boven.
    Let er bij gebruik van y-positie Bottom op dat er geen lege rand aan de bovenkant van het scherm ontstaat omdat de afbeelding te kort is.

Bekijk hieronder de 2 voorbeelden van de verschillende instellingen van de Achtergrondpositie. De achtergrond-afmeting is voor beiden 100% auto. De foto links met de standaard instelling: Center (x) Top (y), de foto rechts met instelling: Center (x) Center (y).

Bekijk de pagina's van de voorbeelden hierboven

• Achtergrondpositie Center(x)/Top(y)
• Achtergrondpostitie Center(x)/Center(y)

Responsive achtergrond

Op de desktop heeft een beeldscherm een liggend formaat. Wanneer je de pagina bekijkt op een mobiele telefoon zie je dezelfde pagina in staand formaat. Op beide schermformaten wordt de achtergrondafbeelding schermvullend weergegeven. De standaard-instellingen die hiervoor zorgen zijn voor desktop en mobiel precies omgekeerd, op desktop is de breedte 100%, op mobiel is juist de hoogte 100%:

Wanneer je een liggend fotoformaat gebruikt, zie je dat er op mobiel aan de zijkant een een groot deel van de foto wegvalt. Wanneer het onderwerp van de foto in het midden staat zal dit geen probleem zijn. Staat het onderwerp op de foto aan de linker of rechterkant dan kun je het onderwerp op mobiel scherm in beeld brengen door bij de instellingen Afmeting en positie responsive de horizontale positie (x) links of rechts in te stellen in plaats van gecentreerd.
Het hangt dus af van het onderwerp van de afbeelding welke instelling het meest geschikt is.

In het voorbeeld hieronder zie je de verschillende instellingen bij een verschillende onderwerp op de foto; de positie (x) ingesteld Right/ Center/ Left

Achtergrond van een sectie

Behalve de pagina kun je de secties ook een achtergrondafbeelding geven (kan ook beide). Je kunt ook een kleur geven aan de hele sectie of aan de afzonderlijke kolommen.

• Open de sectie door aan de linkerkant op de naam te klikken, of voeg een nieuwe sectie toe.
• Achtergrondkleur: klik op de tab kleur en klik in het bovenste veld Achtergrondkleur om de hele sectie een kleur te geven, kies een kleur of plak de hexadecimale kleurnummer in het veld.
  De velden eronder zijn voor de afzonderlijke kolommen, deze hoef je alleen in te vullen als je deze verschillende kleuren wilt geven.
• Achtergrondafbeelding: Klik op de tab achtergrond
  Klik op de knop Media toevoegen. De Media manager wordt geopend: kies een bestaand beeld of upload nieuw beeld
  Instellingen voor de achtergrondafbeelding
  De Instellingen zijn vergelijkbaar met de instellingen die hierboven beschreven zijn: Achtergrond-herhaling, Achtergrond-afbeelding gedrag, Achtergrond-positie en Achtergrond-afmeting. Er zijn voor de achtergrond van de sectie geen aparte instellingen voor mobiele weergave.

Voorbeelden in de standaard-templates

• Deze pagina heeft 5 secties met een achtergrondafbeelding fixed, de content in elke sectie scrollt over de achtergrondfoto.
• Op deze pagina staat een sectie met een streamer, de sectie heeft een achtergrondafbeelding fixed, de streamer scrollt erover heen.