--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/element-settings/background' title: 'Een kleur of foto achter inhoud zetten | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:59:09+00:00' updated: '2026-10-24T06:22:39+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Geef een strook van je pagina een merkkleur of een foto, zodat een kop opvalt en de strook als één blok leest. Je stelt de kleur en de foto in in het paneel Stijl van elk element. Een Sectie voegt een paneel Achtergrondeffecten toe voor een vaste foto, parallax, een verloop of een YouTube-video. De video volgt het recept hieronder: hij zet een foto achter een kop en een donker verloop over de foto, zodat de witte kop leesbaar blijft. tags: - 'Elementen stylen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:22:39+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Een kleur of foto achter inhoud zetten' description: |- Geef een strook van je pagina een merkkleur of een foto, zodat een kop opvalt en de strook als één blok leest. Je stelt de kleur en de foto in in het paneel Stijl van elk element. Een Sectie voegt een paneel Achtergrondeffecten toe voor een vaste foto, parallax, een verloop of een YouTube-video. De video volgt het recept hieronder: hij zet een foto achter een kop en een donker verloop over de foto, zodat de witte kop leesbaar blijft. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:59:09+0000' dateModified: '2026-10-24T06:22:39+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/documentation/learn-dxpr-builder/element-settings/background' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/element-settings/background' description: |- Geef een strook van je pagina een merkkleur of een foto, zodat een kop opvalt en de strook als één blok leest. Je stelt de kleur en de foto in in het paneel Stijl van elk element. Een Sectie voegt een paneel Achtergrondeffecten toe voor een vaste foto, parallax, een verloop of een YouTube-video. De video volgt het recept hieronder: hij zet een foto achter een kop en een donker verloop over de foto, zodat de witte kop leesbaar blijft. 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 --- [Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) # Een kleur of foto achter inhoud zetten. Learn DXPR BuilderBuild pagesElementen stylen ## In this guide Related guides - [Tekstgrootte en -kleur instellen](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography) Geef een strook van je pagina een merkkleur of een foto, zodat een kop opvalt en de strook als één blok leest. Je stelt de kleur en de foto in in het paneel **Stijl** van elk element. Een Sectie voegt een paneel **Achtergrondeffecten** toe voor een vaste foto, parallax, een verloop of een YouTube-video. De video volgt het recept hieronder: hij zet een foto achter een kop en een donker verloop over de foto, zodat de witte kop leesbaar blijft. ## Voordat je begint - Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met **More**. Nieuw in de builder? Zie [Je eerste pagina](/nl/hc/documentation/learn-dxpr-builder/getting-started/first-page). - **Opslaan** in het dialoogvenster bewaart een wijziging in de editor. **Opslaan** op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”. - **Gebruik een Sectie** voor een strook over de volle pagina. Alleen een Sectie heeft **Achtergrondeffecten**. - **Gebruik een Tekst- of Kaart-element** voor een gekleurd vak achter een paar regels in een kolom. - **Gebruik je thema** voor achtergronden op elke pagina, zoals de paginabody of de footer. - **Houd woorden uit de foto.** Een achtergrondfoto heeft geen alt-tekst, dus schermlezers slaan hem over. Zet je boodschap in een kop erbovenop. ## Recept: een leesbare kop op een foto Witte tekst op een drukke foto is moeilijk te lezen. Een donker verloop over de foto lost dat op, en het blijft werken als je de foto wisselt. Je hebt een Sectie nodig met je kop in een Tekst-element. 1. Beweeg over de **Sectie**, klik op **More** en daarna **Instellingen**. 2. Open het paneel **Stijl** en klik op **Afbeelding selecteren** onder **Achtergrondafbeelding**. Kies een foto. Er verschijnt een miniatuur, met een lijst met afbeeldingsgroottes. 3. Kies in de lijst een grootte die minstens zo breed is als het breedste scherm waarvoor je ontwerpt, of **Oorspronkelijke afbeelding (Niet schalen)**. Vermijd **Optimaliseren voor snel laden** voor een volle strook. 4. Zet **Achtergrondstijl** op **Vullend** en **Achtergrondpositie** op **Midden midden**. 5. Open het paneel **Achtergrondeffecten** en zet **Achtergrondeffect** op **Verloop**. Je foto blijft; het verloop ligt eroverheen. 6. Typ in het kleurveld van **Beginkleur** `rgba(0, 0, 0, 0.6)`: zwart op 60%. Typ `rgba(0, 0, 0, 0.3)` voor **Eindkleur**. Laat **Verlooprichting** op 180 staan, zodat de sluier van boven naar beneden loopt. 7. Klik in het dialoogvenster op **Opslaan**. De sectie toont de foto onder een donkere sluier. 8. Beweeg over het **Tekst**-element, klik op **More** en daarna **Instellingen**. Zet in zijn paneel **Stijl** **Letterkleur** op wit en klik op **Opslaan**. 9. Klik op **Opslaan** op de werkbalk. Controleer de kop tegen het lichtste deel van de foto. Mik op een contrast van minstens 4,5 op 1, of 3 op 1 voor grote koppen; de pagina [typografie](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography) legt deze doelen uit. Nog steeds moeilijk te lezen? Verhoog beide waarden, bijvoorbeeld naar 0,8 en 0,5. ## Wat je ziet De sectie toont je foto onder een donkere sluier, het donkerst bovenaan, met de witte kop erop. **Vullend** vult de hele sectie, dus op een smal scherm worden er meer van de zijkanten van de foto afgesneden. ## Hoe de instellingen werken | Veld | Wat het doet | |---|---| | **Achtergrond** | Een kleur achter de inhoud. De dekkingsregelaar van de kiezer maakt hem doorschijnend. | | **Achtergrondafbeelding** | Een foto achter de inhoud: via **Afbeelding selecteren**, via een URL, of via **AI-afbeelding genereren** tenzij je site het heeft uitgezet. | | **Achtergrondstijl** | Hoe de foto het element vult. Zie de volgende tabel. | | **Achtergrondpositie** | Het punt waaraan de foto is vastgepind. Met **Vullend** bepaalt hij welk deel van de foto zichtbaar blijft. | | **Achtergrondstijl** | Resultaat | |---|---| | **Themostandaarden** | Tenzij je thema anders zegt, herhaalt de foto zich op zijn eigen grootte vanuit de linkerbovenhoek. | | **Vullend** | De foto vult het element en de randen die niet passen worden afgesneden. Het beste voor foto's. | | **Bevatten** | De hele foto verschijnt, één keer. Er kunnen lege stroken overblijven aan twee kanten. Het beste voor logo's. | | **Niet herhalen** | Eén kopie op zijn eigen grootte. | | **Herhalen** | De foto tegelt over het element. Goed voor patronen. | De kleur zit onder de foto. Hij schijnt door de heldere delen van een foto heen, in de stroken rond een foto op **Bevatten**, en terwijl de foto laadt. Kies een kleur dicht bij de hoofzaaktoon van de foto. De grootte **Optimaliseren voor snel laden** schaalt een foto terug naar maximaal 1024 px breed en slaat hem op als WebP. Dat past bij een vak, maar het oogt zacht op een volle strook op een groot scherm. Dezelfde foto laadt op elk schermformaat, telefoons inbegrepen. Het paneel **Zweefstijl** heeft zijn eigen **Achtergrond** en **Achtergrondafbeelding**, zodat een vak van kleur kan wisselen of zijn foto kan wisselen bij hover. ## Achtergrondeffecten van secties Deze effecten hebben een Sectie nodig. **Vaste afbeelding** en **Parallaxafbeelding** verplaatsen de foto uit **Achtergrondafbeelding**, dus stel eerst de foto in. | **Achtergrondeffect** | Wat bezoekers zien | Instellingen | |---|---|---| | **Eenvoudige afbeelding** | De foto scrolt mee met de pagina. Dit is de standaard. | geen | | **Vaste afbeelding** | De foto staat stil terwijl de inhoud eroverheen scrolt. | geen | | **Parallaxafbeelding** | De foto scrolt langzamer dan de inhoud. | **Parallaxsnelheid** (0 tot 100; kiezen van **Parallaxafbeelding** zet 20 als hij 0 is), **Parallaxmodus** (**Vast** of **Lokaal**), **Uitschakelen op mobiel** (schermen smaller dan 481 px) | | **Verloop** | Een mengeling van twee kleuren, alleen of over de foto. | **Beginkleur**, **Eindkleur**, **Verlooprichting** (1 tot 360 graden; 180 loopt van boven naar beneden), **Beginpositie**, **Eindpositie** | | **YouTube-video** | Een gedempte video speelt terwijl de sectie in beeld is en pauzeert als hij weg scrolt. | **YouTube-video-URL**, **Begintijd in seconden**, **Stoptijd in seconden**, **Video-opties** | Over een foto loopt het verloop altijd van rand tot rand. **Beginpositie** en **Eindpositie** gelden alleen voor een verloop zonder foto. ## Als je de achtergrond niet ziet - **De foto verschijnt als een dunne strook.** Een achtergrond voegt geen hoogte toe; de sectie is zo hoog als zijn inhoud en opvulling. Voeg inhoud toe, of zet **100% hoogte** aan in het paneel **Algemeen**. Voor meer opvulling volg je [een hogere sectie](/nl/hc/documentation/learn-dxpr-builder/element-settings/spacing#recipe-a-taller-section). - **De foto herhaalt zich of toont maar één hoek.** **Achtergrondstijl** staat op **Themostandaarden**. Kies **Vullend**. - **De foto oogt zacht op een breed scherm.** **Optimaliseren voor snel laden** maakt hem maximaal 1024 px breed. Kies een bredere grootte in de lijst. - **De foto is verborgen achter effen zwart.** De verloopkleuren hebben geen transparantie. Eindig elke waarde met een getal onder 1, zoals `rgba(0, 0, 0, 0.6)`. - **De kop blijft donker.** Een kleurenklasse onder het Tekst-element bij **HTML-klassen**, of een themaregel met `!important`, wint. Verwijder de chip, of zie [typografie](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography). - **De achtergrond is weg na een herlaadbeurt.** **Opslaan** in het dialoogvenster bewaart een wijziging alleen in de editor. Klik op **Opslaan** op de werkbalk. - **De kleur is niet te zien.** De foto bedekt hem. Voor een tint over de foto gebruik je **Verloop** in **Achtergrondeffecten**. - **Beginpositie en Eindpositie veranderen niets.** De sectie heeft een **Achtergrondafbeelding**, dus het verloop loopt van rand tot rand. Gebruik **Verlooprichting** en transparante kleuren. - **Een klassekleur wint.** Een klasse zoals **Primaire achtergrond** onder **HTML-klassen** verslaat je **Achtergrond**. Verwijder zijn chip. - **Achtergrond doet niets op een Cirkelteller, Voortgangsbalk of Scheidingslijn.** Deze elementen gebruiken hun eigen kleuren. Stel **Achtergrondkleur**, **Achterkleur** of **Kleur** in in het paneel **Algemeen**. ## Wat nu? - [Typografie](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography): stel de kopkleur in op je foto en controleer zijn contrast.