--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden' title: 'Geef een sectie een kleur-, foto- of verloopachtergrond | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:30:13+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Je kunt elke sectie vullen met een kleur, een foto of een verloop. Kleur en foto komen uit het paneel Style, dat secties, rijen, kolommen en elementen allemaal hebben. Secties voegen een paneel Background effects toe voor verlopen, vaste en parallaxfoto's en YouTube-video. Het voorbeeld bouwt een marineblauwe sectie met een stadsfoto, witte tekst en een verloop erop. De video plaatst een foto achter een sectie en dekt die daarna af met een verloop. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Geef een sectie een kleur-, foto- of verloopachtergrond' description: |- Je kunt elke sectie vullen met een kleur, een foto of een verloop. Kleur en foto komen uit het paneel Style, dat secties, rijen, kolommen en elementen allemaal hebben. Secties voegen een paneel Background effects toe voor verlopen, vaste en parallaxfoto's en YouTube-video. Het voorbeeld bouwt een marineblauwe sectie met een stadsfoto, witte tekst en een verloop erop. De video plaatst een foto achter een sectie en dekt die daarna af met een verloop. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:30:13+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/achtergronden' description: |- Je kunt elke sectie vullen met een kleur, een foto of een verloop. Kleur en foto komen uit het paneel Style, dat secties, rijen, kolommen en elementen allemaal hebben. Secties voegen een paneel Background effects toe voor verlopen, vaste en parallaxfoto's en YouTube-video. Het voorbeeld bouwt een marineblauwe sectie met een stadsfoto, witte tekst en een verloop erop. De video plaatst een foto achter een sectie en dekt die daarna af met een verloop. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/nl/hc/documentation/learn-dxpr-builder/design/overview) # Geef een sectie een kleur-, foto- of verloopachtergrond. DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen ## In deze gids Gerelateerde gidsen - [Laat een sectie doorlopen van rand tot rand](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/volledige-breedte-lay-outs) - [Animeer elementen bij scrollen, hover of klik](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/animatie-tabblad) - [Een hero-sectie ontwerpen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie) Je kunt elke sectie vullen met een kleur, een foto of een verloop. Kleur en foto komen uit het paneel **Style**, dat secties, rijen, kolommen en elementen allemaal hebben. Secties voegen een paneel **Background effects** toe voor verlopen, vaste en parallaxfoto's en YouTube-video. Het voorbeeld bouwt een marineblauwe sectie met een stadsfoto, witte tekst en een verloop erop. De video plaatst een foto achter een sectie en dekt die daarna af met een verloop. ## Een kleur en een foto toevoegen 1. Klik op **Add Elements** in het lege inhoudsgebied en kies **Section** op het tabblad **Layout**. 2. Wijs de sectie aan en open **More > Settings**. 3. Open het paneel **Style**. 4. Kies een donkerblauw staal voor **Background**. 5. Kies wit voor **Font color**. 6. Klik onder **Background image** op **Select Image**. Zoek in de mediabibliotheek, vink een foto aan en klik op **Insert selected**. 7. Zet **Background style** op **Cover**. 8. Zet **Background position** op **Center center** en klik op **Save**. 9. Klik op **+** op de sectie en kies **Text** op het tabblad **Content**. 10. Typ een kop, zoals `Evening lectures`, en één regel eronder. Zet de kop op **Heading 2** en centreer beide regels in de editorwerkbalk. 11. Open het paneel **Style**, zet **Font color** op wit en klik op **Save**. ## Een verloop toevoegen 1. Wijs de sectie aan en open **More > Settings** opnieuw. 2. Open het paneel **Background effects** en zet **Background effect** op **Gradient**. 3. Kies een **Start color** en een **End color** en klik daarna op **Save**. 4. Klik op de werkbalk op **Save**, open het weergavemenu (het oogpictogram) en kies **Preview**. ## Wat je ziet Na de eerste stappen vult de foto de hele sectie achter de witte kop. **Cover** snijdt weg wat niet past en **Center center** houdt het midden van de foto in beeld. De marineblauwe kleur toont alleen terwijl de foto laadt of waar de foto niet komt. Het verloop vloeit van de startkleur bovenaan naar de eindkleur onderaan. Het ligt boven op de foto. Dekkende kleuren dekken de foto volledig af; kleuren met wat transparantie laten hem doorschijnen. ## Instellingen ### Paneel Style (elke sectie, rij, kolom en element) | Instelling | Wat het doet | Standaard | |---|---|---| | **Background** | Een vulkleur uit de kleurkiezer of een themastaal | Geen | | **Background image** | Een afbeelding uit de mediabibliotheek, gekozen met **Select Image** | Geen | | **Background style** | **Cover** vult het element en snijdt bij; **Contain** toont de hele afbeelding en kan randen overlaten; **No repeat** toont hem één keer op eigen grootte; **Repeat** tegelt hem | **Theme defaults** | | **Background position** | Welk deel van de afbeelding in beeld blijft wanneer die wordt bijgesneden, zoals **Center center** of **Left top** | **Theme defaults** | Wanneer AI-afbeeldingsgeneratie is ingesteld, neemt **Background image** ook een prompt aan. Zie [AI-afbeeldingsgeneratie](/nl/hc/documentatie/dxpr-builder-leren/ai/afbeelding-genereren). ### Paneel Background effects (alleen secties) | Achtergrondeffect | Wat het doet | Extra instellingen | |---|---|---| | **Simple image** (standaard) | De foto scrollt met de pagina mee | Geen | | **Fixed image** | De foto blijft staan terwijl de pagina eroverheen scrollt | Geen | | **Parallax image** | De foto beweegt trager dan de pagina. Zie [Hero-sectie](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie) voor een voorbeeld. | **Parallax speed**, **Parallax mode** (**Fixed** of **Local**), **Disable on mobile** | | **Gradient** | Twee kleuren vloeien over de sectie, boven op de foto als die er is | **Start color**, **End color**, **Gradient direction** (180 graden loopt van boven naar beneden), **Start position**, **End position** | | **YouTube video** | Een gedempte YouTube-video vult de sectie; vink **Loop** aan om hem te herhalen | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Vaste en parallaxeffecten verplaatsen de foto die je in het paneel **Style** hebt ingesteld. Een YouTube-video heeft geen foto nodig. ## Als je de achtergrond niet ziet - **Er is geen paneel Background effects.** Alleen secties hebben het. Wijs de sectie aan, niet een rij, kolom of element, en open **More > Settings**. - **De foto is afgesneden.** **Cover** snijdt weg wat niet in de sectie past. Wijzig **Background position** om het onderwerp in beeld te houden, of kies **Contain**. - **Het verloop verbergt de foto.** Het verloop ligt erbovenop en dekkende kleuren dekken de foto af. Verlaag de opaciteit van **Start color** en **End color** in de kleurkiezer. - **De sectie toont geen verloop.** Een verloop heeft beide kleuren nodig. Kies een **Start color** en een **End color**. - **De YouTube-video speelt niet af.** **YouTube video URL** is leeg of geen link naar één video. Plak het volledige adres van de video, zoals `https://www.youtube.com/watch?v=` gevolgd door zijn ID. ## Wat nu? - [Volledige-breedtelay-outs](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/volledige-breedte-lay-outs): laat de achtergrond en de inhoud van rand tot rand lopen. - [Tabblad Animatie](/nl/hc/documentation/learn-dxpr-builder/design/animation-tab): fade de tekst in terwijl de sectie in beeld scrollt. - [Hero-sectie](/nl/hc/documentatie/dxpr-builder-leren/tutorials/hero-sectie): bouw een volledige paginakop met een parallaxfoto.