Achtergrondstijlen - Webflow hulp
Een overzicht van de achtergrondstijlen die je op een element kunt instellen: kleur, afbeeldingen, verlopen, kleur overlays en video's.
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.
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:
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.
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-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!