--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/design/backgrounds' title: 'Abschnitt mit Farbe, Foto oder Verlauf füllen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:01:57+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Sie können jeden Abschnitt mit Farbe, Foto oder Verlauf füllen. Farbe und Foto kommen aus dem Panel Style, das Abschnitte, Zeilen, Spalten und Elemente alle haben. Abschnitte fügen ein Panel Background effects für Verläufe, fixierte und Parallax-Fotos und YouTube-Video hinzu. Das Beispiel baut einen marineblauen Abschnitt mit Stadtfoto, weißem Text und Verlauf darüber. Das Video legt ein Foto hinter einen Abschnitt und deckt es dann mit einem Verlauf ab. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Abschnitt mit Farbe, Foto oder Verlauf füllen' description: |- Sie können jeden Abschnitt mit Farbe, Foto oder Verlauf füllen. Farbe und Foto kommen aus dem Panel Style, das Abschnitte, Zeilen, Spalten und Elemente alle haben. Abschnitte fügen ein Panel Background effects für Verläufe, fixierte und Parallax-Fotos und YouTube-Video hinzu. Das Beispiel baut einen marineblauen Abschnitt mit Stadtfoto, weißem Text und Verlauf darüber. Das Video legt ein Foto hinter einen Abschnitt und deckt es dann mit einem Verlauf ab. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:01:57+0000' dateModified: '2026-10-24T09:09:48+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/de/hc/documentation/learn-dxpr-builder/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- Sie können jeden Abschnitt mit Farbe, Foto oder Verlauf füllen. Farbe und Foto kommen aus dem Panel Style, das Abschnitte, Zeilen, Spalten und Elemente alle haben. Abschnitte fügen ein Panel Background effects für Verläufe, fixierte und Parallax-Fotos und YouTube-Video hinzu. Das Beispiel baut einen marineblauen Abschnitt mit Stadtfoto, weißem Text und Verlauf darüber. Das Video legt ein Foto hinter einen Abschnitt und deckt es dann mit einem Verlauf ab. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[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) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Abschnitt mit Farbe, Foto oder Verlauf füllen. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Abschnitt über volle Breite laufen lassen](/de/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [Elemente bei Scroll, Hover oder Klick animieren](/de/hc/documentation/learn-dxpr-builder/design/animation-tab) - [Eine Lizenz freigeben](/de/hc/documentation/learn-dxpr-builder/tutorials/hero-section) Sie können jeden Abschnitt mit Farbe, Foto oder Verlauf füllen. Farbe und Foto kommen aus dem Panel **Style**, das Abschnitte, Zeilen, Spalten und Elemente alle haben. Abschnitte fügen ein Panel **Background effects** für Verläufe, fixierte und Parallax-Fotos und YouTube-Video hinzu. Das Beispiel baut einen marineblauen Abschnitt mit Stadtfoto, weißem Text und Verlauf darüber. Das Video legt ein Foto hinter einen Abschnitt und deckt es dann mit einem Verlauf ab. ## Farbe und Foto hinzufügen 1. Klicken Sie im leeren Inhaltsbereich auf **Add Elements** und wählen Sie **Section** im Tab **Layout**. 2. Zeigen Sie auf den Abschnitt und öffnen Sie **More > Settings**. 3. Öffnen Sie das Panel **Style**. 4. Wählen Sie ein dunkelblaues Farbfeld für **Background**. 5. Wählen Sie Weiß für **Font color**. 6. Klicken Sie unter **Background image** auf **Select Image**. Durchsuchen Sie die Medienbibliothek, aktivieren Sie ein Foto und klicken Sie auf **Insert selected**. 7. Setzen Sie **Background style** auf **Cover**. 8. Setzen Sie **Background position** auf **Center center** und klicken Sie auf **Save**. 9. Klicken Sie auf **+** am Abschnitt und wählen Sie **Text** im Tab **Content**. 10. Tippen Sie eine Überschrift, etwa `Evening lectures`, und eine Zeile darunter. Setzen Sie die Überschrift auf **Heading 2** und zentrieren Sie beide Zeilen in der Editor-Symbolleiste. 11. Öffnen Sie das Panel **Style**, setzen Sie **Font color** auf Weiß und klicken Sie auf **Save**. ## Verlauf hinzufügen 1. Zeigen Sie auf den Abschnitt und öffnen Sie erneut **More > Settings**. 2. Öffnen Sie das Panel **Background effects** und setzen Sie **Background effect** auf **Gradient**. 3. Wählen Sie **Start color** und **End color**, dann klicken Sie auf **Save**. 4. Klicken Sie in der Symbolleiste auf **Save**, öffnen Sie das Ansichtsmenü (das Augensymbol) und wählen Sie **Preview**. ## Was Sie sehen Nach den ersten Schritten füllt das Foto den ganzen Abschnitt hinter der weißen Überschrift. **Cover** schneidet weg, was nicht passt, und **Center center** hält die Bildmitte im Blick. Die marineblaue Farbe zeigt sich nur, während das Foto lädt oder wo das Foto nicht hinreicht. Der Verlauf blendet von der Startfarbe oben zur Endfarbe unten. Er liegt auf dem Foto. Deckende Farben decken das Foto vollständig ab; Farben mit etwas Transparenz lassen es durchscheinen. ## Settings ### Style-Panel (jeder Abschnitt, jede Zeile, Spalte und jedes Element) | Einstellung | Was sie bewirkt | Standard | |---|---|---| | **Background** | Eine Füllfarbe aus der Farbauswahl oder einem Theme-Farbfeld | Kein | | **Background image** | Ein Bild aus der Medienbibliothek, gewählt mit **Select Image** | Kein | | **Background style** | **Cover** füllt das Element und schneidet zu; **Contain** zeigt das ganze Bild und kann Lücken lassen; **No repeat** zeigt es einmal in eigener Größe; **Repeat** kachelt es | **Theme defaults** | | **Background position** | Welcher Bildteil im Blick bleibt, wenn zugeschnitten wird, etwa **Center center** oder **Left top** | **Theme defaults** | Wenn KI-Bilderzeugung eingerichtet ist, nimmt **Background image** auch einen Prompt. Siehe [KI-Bilderzeugung](/de/hc/documentation/learn-dxpr-builder/ai/image-generation). ### Background-effects-Panel (nur Abschnitte) | Hintergrundeffekt | Was er bewirkt | Zusatzeinstellungen | |---|---|---| | **Simple image** (Standard) | Das Foto scrollt mit der Seite | Keine | | **Fixed image** | Das Foto bleibt stehen, während die Seite darüber scrollt | Keine | | **Parallax image** | Das Foto bewegt sich langsamer als die Seite. Siehe [Hero-Abschnitt](/de/hc/documentation/learn-dxpr-builder/tutorials/hero-section) als Beispiel. | **Parallax speed**, **Parallax mode** (**Fixed** oder **Local**), **Disable on mobile** | | **Gradient** | Zwei Farben blenden über den Abschnitt, auf dem Foto, falls eines da ist | **Start color**, **End color**, **Gradient direction** (180 Grad läuft oben nach unten), **Start position**, **End position** | | **YouTube video** | Ein stummes YouTube-Video füllt den Abschnitt; aktivieren Sie **Loop**, um es zu wiederholen | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Fixierte und Parallax-Effekte bewegen das Foto, das Sie im Panel **Style** gesetzt haben. Ein YouTube-Video braucht kein Foto. ## Wenn Sie den Hintergrund nicht sehen - **Es gibt kein Background-effects-Panel.** Nur Abschnitte haben es. Zeigen Sie auf den Abschnitt, nicht auf Zeile, Spalte oder Element, und öffnen Sie **More > Settings**. - **Das Foto ist abgeschnitten.** **Cover** schneidet weg, was nicht in den Abschnitt passt. Ändern Sie **Background position**, um das Motiv im Blick zu halten, oder wählen Sie **Contain**. - **Der Verlauf verdeckt das Foto.** Der Verlauf liegt obenauf, und deckende Farben decken das Foto ab. Senken Sie die Deckkraft von **Start color** und **End color** in der Farbauswahl. - **Der Abschnitt zeigt keinen Verlauf.** Ein Verlauf braucht beide Farben. Wählen Sie **Start color** und **End color**. - **Das YouTube-Video spielt nicht.** **YouTube video URL** ist leer oder kein Link auf ein Video. Fügen Sie die volle Adresse des Videos ein, etwa `https://www.youtube.com/watch?v=` gefolgt von seiner ID. ## Wie geht es weiter? - [Volle Breite](/de/hc/documentation/learn-dxpr-builder/design/full-width-layouts): Hintergrund und Inhalt von Kante zu Kante laufen lassen. - [Animations-Tab](/de/hc/documentation/learn-dxpr-builder/design/animation-tab): Text einblenden, während der Abschnitt ins Bild scrollt. - [Hero-Abschnitt](/de/hc/documentation/learn-dxpr-builder/tutorials/hero-section): ganzen Seitenkopf mit Parallax-Foto bauen.