Achtergrondstijlen - Webflow hulp

Last updated on 10/8/2025@mrbirddev
Achtergrondstijlen - Webflow hulp

Een overzicht van de achtergrondstijlen die je op een element kunt instellen: kleur, afbeeldingen, verlopen, kleur overlays en video's.

INHOUDSWAARSCHUWING — deze sectie kan mensen met visuele gevoeligheden beïnvloeden. Kijkersdiscretie is geadviseerd.

Achtergrondkleur

Je kunt een achtergrondkleur instellen op elk element behalve afbeeldingen en video's (hoewel je afbeeldingen en video's als achtergronden kunt gebruiken). Voeg een achtergrondkleur toe door een kleurwaarde in te voeren (bijv. hex, rgba of kleurnaam) of door de kleurkiezer te gebruiken. Je kunt ook achtergrondkleur toevoegen aan textelementen of specifieke tekstinhoud binnen een textelement.

Als je wilt dat achtergrondkleuren consistent zijn op je site, gebruik dan de Body (Alle pagina's) tag voor overerving. Style het door het Body-element te selecteren en de tag in het Stijl-paneel te kiezen of door het overervingsmenu te gebruiken. Wijzigingen aan de Body (Alle pagina's) worden standaard toegepast op nieuwe elementen.

De meeste elementen hebben standaard een transparante achtergrond. Sommige elementen, zoals de Slider-component, hebben een standaardkleur die je kunt overschrijven.

Achtergrondafbeelding

Webflow biedt veel opties om je achtergrondafbeelding aan te passen.

Om de achtergrondafbeelding toe te voegen of te wijzigen:

  • Scroll naar Achtergronden in het Stijl-paneel
  • Klik op Afbeelding kiezen in het Asset-paneel
  • Vink het vakje aan voor @2x voor scherpere afbeeldingen op HiDPI-apparaten

Om een achtergrondvideo in te stellen, gebruik je de achtergrondvideocomponent in het Toevoegen-paneel.

Achtergrondafbeelding grootte

  • Aangepast: Stel breedte/hoogte of percentagewaarden in. Schaal groter met waarden boven 100%.
  • Bedekken: Vult en bedekt de achtergrond, mogelijk met bijsnijden van de afbeelding.
  • Bevatten: Houdt de afbeelding binnen het element.

Achtergrondafbeelding positie

Standaard is linksboven. Je kunt posities handmatig aanpassen (px, %, VW, VH).

Tegel

Achtergrondafbeeldingen herhalen standaard zowel verticaal als horizontaal. Beheer om horizontaal, verticaal of helemaal niet te herhalen.

Vast of scrollen

Kies Niet vast (afbeelding scrolt) of Vast (afbeelding blijft op zijn plaats). Vaste afbeeldingen worden begrensd door de viewport.

Verlopen

Verlopen kunnen alleen worden gebruikt of gelaagd op achtergrondkleur/-afbeelding. Twee soorten:

  • Lineaire verlopen
  • Radiale verlopen

Beide hebben stops (punten) waar kleuren vervagen.

Safari behandelt verlopen naar transparantie als "transparant zwart", dus transparantie lijkt zwart in Safari.

Lineair verloop

Stel richting in door hoek via wijzerplaat, pijlen (45 graden stappen) of veldinvoer.

Verloopstops

Bewerk kleur/doorzichtigheid bij stops. Laag over afbeelding maakt afbeelding zichtbaar bij lagere doorzichtigheid. Voeg stops toe door te klikken. Verwijder door naar buiten te slepen.

Herhalen

Schakelaars voor het herhalen van het verloop.

Omkeren

Icoon om stopposities om te keren.

Radiaal verloop

Creëert cirkelvormig verloop. Linker stop is kleur in het midden.

Positie

Kies brandpunt via stippen of handmatig met waarden/eenheden.

Grootte

Vooraf ingestelde bedieningselementen:

  • Dichtstbijzijnde zijde: midden naar dichtstbijzijnde zijde
  • Dichtstbijzijnde hoek: midden naar dichtstbijzijnde hoek
  • Verste zijde: midden naar verste zijde
  • Verste hoek: (standaard)

Kleuroverlay

Voeg kleuroverlay toe aan achtergronden met kleurkiezer en doorzichtigheid.

Afbeeldingen en verlopen stapelen

Stapel meerdere achtergrondafbeeldingen, verlopen en overlays voor effect. Herorden met slepen, zichtbaarheid schakelen met oogicoon, verwijderen met prullenbak.

Achtergrondvideo

Achtergrondvideo's zijn stille, herhalende video's voor achtergronden om een filmisch tintje toe te voegen. Let op:

Automatisch afspelende en herhalende video's kunnen afleidend of belemmerend zijn voor mensen met cognitieve/vestibulaire problemen. Bied altijd bedieningselementen voor pauzeren aan.
Webflow biedt standaard een afspeel-/pauzeknop voor toegankelijkheid. Video's worden niet automatisch afgespeeld voor gebruikers met de instelling "Voorkeur voor minder beweging".

Toevoegen met Snel zoeken (CMD/CTRL+E) of Toevoegen paneel > Componenten. Upload je video (<30MB; webm, mp4, mov, ogg). Bestandsnamen moeten geen spaties/speciale tekens bevatten.

Transcodering vindt plaats na uploaden (mp4 & webm voor browserondersteuning).

Videoinstellingen

  • Video herhalen: speelt continu af.
  • Video automatisch afspelen: start bij het laden van de pagina.
  • Afspeel-/pauzeknop toevoegen: bezoeker kan afspelen regelen.
WCAG vereist pauze-/stop-/verbergknoppen voor bewegende inhoud die langer dan 5 seconden duurt. Zorg altijd voor bedieningselementen voor toegankelijkheid.

Achtergrondvideo bekijken

  • Zweef over miniatuur
  • Open in nieuw tabblad
  • Voorbeeldpictogram in balk

De achtergrondvideo vervangen

Open instellingen om video te vervangen, transcoderen, bekijken, enz.

De achtergrondvideo als sectie gebruiken

Plaats inhoud binnen het Achtergrondvideo-element. Stijl zoals gebruikelijk in het Stijl paneel.

Achtergrondvideo's worden mogelijk niet automatisch afgespeeld op aanraakapparaten als databesparing of energiebesparingsmodus is ingeschakeld.

Achtergrondvideo-overlay

Voeg een verloop of effen overlay toe voor contrast. Overlay zit bovenop de video, onder de inhoud.

En dat is het gebruik van achtergronden in Webflow!

Terug naar webflow help

Last updated on 10/8/2025@mrbirddev
Recent Articles
Loading...