# Dynamischer Hintergrundbereich > **Was Sie lernen werden** > > * Wie man dynamische Hintergrundsektionen hinzufügt und konfiguriert > * Erweiterte Hintergrundoptionen, einschließlich Videos, Bilder und Überlagerungen > * Mobile Optimierung und responsive Hintergrundeinstellungen > * Animations- und Übergangseffekte *** ## 🎯 Was ist die Dynamic Background Section? Die **Dynamischer Hintergrundbereich** ist ein leistungsfähiges, flexibles Hintergrundsystem in Plain Jane v3.1, das es Ihnen ermöglicht, immersive Seitenhintergründe mit erweiterten Anpassungsoptionen zu erstellen. Im Gegensatz zu statischen Hintergründen unterstützt diese Sektion Video-Hintergründe, Bildüberlagerungen, Verläufe und responsive Mobile-Konfigurationen. **Hauptfunktionen:** * Video-Hintergrundunterstützung mit Fallback-Bildern * Verlauf-Überlagerungen mit Opazitätskontrollen * Getrennte Konfigurationen für Mobilgeräte und Desktop * Animations- und Übergangseffekte * Mehrere Optionen für Hintergrundgröße und Positionierung * Leistungsoptimiertes Laden Verfügbar in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ *** ## 🔧 So fügen Sie die Dynamic Background Section hinzu 1. Gehen Sie zu **Onlineshop > Themes > Anpassen** 2. Navigieren Sie zu der Seite, auf der Sie den Hintergrund hinzufügen möchten 3. Klicken Sie **Sektion hinzufügen** 4. Wählen Sie **Dynamischer Hintergrund** 5. Konfigurieren Sie die Hintergrundeinstellungen in der Seitenleiste > 💡 **Hinweis**: Diese Sektion wird häufig auf Startseiten, Landingpages und speziellen Werbeseiten verwendet. *** ## 🖼️ Optionen zur Hintergrundkonfiguration ### **Hintergrundstil** **Farbiger Hintergrund** * Option für einfarbigen Hintergrund * Wählen Sie einen beliebigen Hex-Farbwert * Getrennte Farboptionen für Desktop und Mobil * Ideal für minimalistische Designs **Bildhintergrund** * Laden Sie benutzerdefinierte Hintergrundbilder hoch * Unterstützung für hochauflösende Bilder * Mehrere Größen- und Positionierungsoptionen * Automatische Optimierung für das Web **Video-Hintergrund** * Laden Sie MP4-Videodateien für dynamische Hintergründe hoch * Automatischer Fallback zu Bildern auf Mobilgeräten (zur Leistungssteigerung) * Schleifen- und Autoplay-Steuerungen * Optimiert für Leistung und Datenverbrauch ### **Desktop-Hintergrundeinstellungen** **Hintergrundfarbe** * Primäre Hintergrundfarbe für Desktop * Standard: `#ffffff` (weiß) * Wird als Fallback verwendet, wenn Bilder/Videos nicht geladen werden **Hintergrundbild** * Laden Sie ein desktop-spezifisches Hintergrundbild hoch * Empfohlene Mindestgröße: 1920x1080px * Unterstützt JPG-, PNG- und WebP-Formate **Hintergrundvideo** * Laden Sie ein Hintergrundvideo für den Desktop hoch * MP4-Format empfohlen * Halten Sie die Dateigröße unter 10 MB für optimale Leistung * Automatische Schleifen- und Stummschalt-Einstellungen ### **Mobile Hintergrund-Einstellungen** **Mobile Hintergrundfarbe** * Getrennte Farbeinstellung für Mobilgeräte * Oft anders als auf dem Desktop für eine bessere mobile Erfahrung * Optimiert für kleinere Bildschirme **Mobile Hintergrundbild** * Mobil-spezifisches Hintergrundbild * Empfohlene Größe: 800x1200px (Hochformat) * Ersetzt automatisch Video-Hintergründe auf Mobilgeräten **Hintergrundbild auf Mobilgeräten anzeigen** * Schalter zum Ein- / Ausschalten von Bildern auf Mobilgeräten * Verbessert die Leistung bei langsameren Verbindungen * Verwendet Farb-Hintergrund als Fallback *** ## 🎨 Überlagerungs- und Verlaufseffekte ### **Obere Überlagerung** **Überlagerung Obere Farbe** * Verlaufsüberlagerungsfarbe am oberen Rand des Hintergrunds * Erzeugt Tiefe und verbessert die Lesbarkeit von Text * Getrennte Einstellungen für Desktop und Mobil **Opazität der oberen Überlagerung** * Steuert die Transparenz der oberen Überlagerung (0–100%) * Desktop: Einstellbare Opazität für Designflexibilität * Mobil: Getrennte Opazitätssteuerung für Mobile-Optimierung ### **Untere Überlagerung** **Überlagerung Untere Farbe** * Verlaufsüberlagerungsfarbe am unteren Rand * Erzeugt sanfte Farbübergänge * Verbessert die visuelle Hierarchie **Opazität der unteren Überlagerung** * Steuert die Transparenz der unteren Überlagerung * Unabhängige Einstellungen für Desktop und Mobil * Ermöglicht subtile oder dramatische Effekte *** ## 📱 Mobiloptimierung ### **Responsives Verhalten** **Automatischer Mobilwechsel** * Videos wechseln automatisch zu Bildern auf Mobilgeräten * Optimiert für mobilen Datenverbrauch * Erhält visuelle Konsistenz über Geräte hinweg **Mobil-spezifische Einstellungen** * Getrennte Farb-, Bild- und Überlagerungseinstellungen * Optimierte Dateigrößen für die mobile Anzeige * Berücksichtigung touch-freundlicher Interaktionen **Leistungsoptimierung** * Lazy Loading für Hintergrundbilder * Komprimierte Videodateien für schnelleres Laden * Automatische Formatwahl basierend auf Browserunterstützung *** ## ⚙️ Erweiterte Anpassung ### **Hintergrundgröße** **Cover (Standard)** * Skaliert den Hintergrund, um den gesamten Bereich abzudecken * Kann Teile des Bildes/Videos zuschneiden * Am besten für Fullscreen-Effekte **Contain** * Skaliert, um innerhalb des Containers zu passen * Zeigt das gesamte Bild/Video * Kann leeren Raum lassen **Auto** * Verwendet die natürliche Größe des Hintergrundmediums * Keine Skalierung angewendet * Am besten für spezifische Designanforderungen ### **Hintergrundposition** **Zentriert (Standard)** * Zentriert den Hintergrund im verfügbaren Raum * Ausgewogene Komposition **Ausrichtung oben/unten** * Am oberen oder unteren Rand des Containers ausrichten * Nützlich für bestimmte Fokuspunkte **Ausrichtung links/rechts** * Horizontale Positionskontrolle * Kreative Layoutmöglichkeiten *** ## 🚀 Best Practices ### **Leistungsoptimierung** **Video-Hintergründe** * Halten Sie Videodateien unter 10 MB * Verwenden Sie H.264-Codierung für beste Kompatibilität * Stellen Sie hochwertige Poster-Bilder als Fallbacks bereit * Testen Sie bei verschiedenen Verbindungsgeschwindigkeiten **Bildoptimierung** * Komprimieren Sie Bilder ohne Qualitätsverlust * Verwenden Sie nach Möglichkeit das WebP-Format * Stellen Sie geeignete Größen für Desktop und Mobil bereit * Berücksichtigen Sie die Auswirkungen der Dateigröße auf Ladezeiten ### **Designüberlegungen** **Lesbarkeit der Inhalte** * Verwenden Sie Überlagerungen, um die Lesbarkeit von Text sicherzustellen * Testen Sie Kontrastverhältnisse für Barrierefreiheit * Berücksichtigen Sie unterschiedliche Betrachtungsbedingungen auf Geräten * Stellen Sie Fallback-Farben für fehlgeschlagene Ladevorgänge bereit **Mobile Erfahrung** * Priorisieren Sie mobile Leistung über visuelle Effekte * Testen Sie auf tatsächlichen Mobilgeräten mit langsameren Verbindungen * Berücksichtigen Sie Datenverbrauchsfolgen für Benutzer * Bieten Sie sinnvolle Fallbacks an ### **Barrierefreiheit** **Bewegungsempfindlichkeit** * Bieten Sie Optionen zum Deaktivieren von Video-Hintergründen * Respektieren Sie die Bewegungseinstellungen des Benutzers * Verwenden Sie nach Möglichkeit subtile Animationen * Testen Sie mit Barrierefreiheitswerkzeugen **Farbkontrast** * Stellen Sie ausreichenden Kontrast für Textlesbarkeit sicher * Testen Sie mit verschiedenen Hintergrundkombinationen * Berücksichtigen Sie farbenblinde Nutzer * Nutzen Sie Verlaufsüberlagerungen strategisch *** ## 🔧 Fehlerbehebung ### **Häufige Probleme** **Video spielt nicht** * Überprüfen Sie das Video-Dateiformat (MP4 empfohlen) * Vergewissern Sie sich, dass die Dateigröße innerhalb der Grenzen liegt * Stellen Sie richtige Encodierungseinstellungen sicher * Testen Sie in verschiedenen Browsern **Schlechte mobile Leistung** * Reduzieren Sie die Bilddateigrößen * Aktivieren Sie mobile Hintergrundoptimierungen * Testen Sie auf echten Mobilgeräten * Erwägen Sie, Videos auf Mobilgeräten zu deaktivieren **Ladeprobleme** * Optimieren Sie Bild- und Videodateigrößen * Prüfen Sie die Anforderungen an die Internetverbindung * Verifizieren Sie, dass Dateiformate unterstützt werden * Testen Sie mit unterschiedlichen Browser-Caching-Einstellungen ### **Browserkompatibilität** **Video-Unterstützung** * Moderne Browser: Volle Unterstützung * Ältere Browser: Fallback zu Bildern * Mobile Browser: Bildersatz aus Leistungsgründen **Bildformate** * WebP: Beste Kompression, Unterstützung moderner Browser * JPEG: Universelle Kompatibilität * PNG: Am besten für Grafiken mit Transparenz *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/german/readme-1/sections-and-features/dynamic-background-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.