> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/german/plain-jane-interactive/sections-and-features/setting-the-background.md). # Hintergrund festlegen Der Hintergrund ist die Grundlage Ihres interaktiven Bereichs. Dieser Leitfaden erklärt, wie Sie Hintergrundbilder auswählen, hochladen und optimieren, um das beste interaktive Erlebnis zu erzielen. ## 🎨 Anforderungen an Hintergrundbilder ### Empfohlene Spezifikationen * **Auflösung**: Mindestens 1600x900px (Seitenverhältnis 16:9) * **Dateiformat**: JPG oder PNG (WebP wird für schnellere Ladezeiten unterstützt) * **Dateigröße**: Unter 2 MB für optimale Leistung * **Qualität**: Hohe Auflösung für eine scharfe Darstellung auf verschiedenen Geräten ### Seitenverhältnis - Hinweise * **16:9 (1920x1080)**: Standard-Widescreen, funktioniert gut auf den meisten Geräten * **4:3 (1600x1200)**: Mehr quadratisches Format, gut für produktfokussierte Szenen * **21:9 (2560x1080)**: Ultraweit, kinoreiches Gefühl für Lifestyle-Aufnahmen ## 📂 Hochladen Ihres Hintergrunds ### Schritt 1: Auf Hintergrundeinstellungen zugreifen 1. **Designanpasser öffnen** * Gehen Sie zu **Onlineshop → Themes** * Klicken Sie **Passen Sie** bei Plain Jane Interactive 2. **Abschnitt Interaktive Umgebung auswählen** * Klicken Sie auf Ihren Abschnitt „Interaktive Umgebung“ * Suchen Sie nach **Hintergrund** Einstellungen ### Schritt 2: Bild hochladen 1. **Bildquelle auswählen** * **Neu hochladen**: Bild von Ihrem Computer hinzufügen * **Vorhandenes wählen**: Aus hochgeladenen Dateien auswählen * **Kostenlose Bilder**: Durchsuchen Sie Shopifys Stock-Fotos 2. **Tipps zur Bildoptimierung** * Verwenden Sie hochwertige Quellbilder * Vor dem Hochladen komprimieren (Tools wie TinyPNG) * Erwägen Sie die Verwendung des WebP-Formats für moderne Browser ## 🔧 Anzeigeeinstellungen des Hintergrunds ### Optionen zur Bildanpassung #### Cover (Empfohlen) * **Verhalten**: Füllt den gesamten Container aus * **Vorteil**: Kein leerer Raum, immer vollständige Abdeckung * **Bedenken**: Kann Teile des Bildes abschneiden * **Am besten für**: Lifestyle-Szenen, Raumsettings #### Contain * **Verhalten**: Zeigt das gesamte Bild innerhalb des Containers * **Vorteil**: Schneidet das Bild niemals zu * **Bedenken**: Kann leere Bereiche um das Bild herum hinterlassen * **Am besten für**: Produktfotos mit wichtigen Details am Rand #### Fill * **Verhalten**: Dehnt das Bild, um genau zu passen * **Vorteil**: Perfekte Anpassung an den Container * **Bedenken**: Kann die Bildproportionen verzerren * **Am besten für**: Abstrakte Hintergründe, Muster ### Hintergrundposition Steuern Sie, welcher Teil des Bildes sichtbar ist, wenn Beschnitt erfolgt: * **Zentriert**: Standard, hält das Hauptmotiv sichtbar * **Oben**: Fokus auf den oberen Bildbereich * **Unten**: Betonung des unteren Abschnitts * **Links/Rechts**: Für Bilder mit nicht zentrierten Motiven ### Hintergrund-Anhang * **Scroll**: Hintergrund bewegt sich mit dem Seiteninhalt (Standard) * **Fixiert**: Hintergrund bleibt an Ort und Stelle, während der Inhalt scrollt * **Lokal**: Hintergrund scrollt mit dem Inhalt des Elements ## 🎯 Die richtige Hintergrundwahl ### Szenentypen #### Raumeinstellungen **Perfekt für**: Möbel, Wohnkultur, Beleuchtung * Gut beleuchtete Innenräume * Mehrere Oberflächen zur Produktplatzierung * Natürlicher Produktkontext **Tipps**: * Sorgen Sie für gleichmäßige Beleuchtung in der gesamten Szene * Vermeiden Sie übermäßig unruhige oder überfüllte Räume * Berücksichtigen Sie verschiedene Raumwinkel (Ecke vs. Frontalaufnahme) #### Lifestyle-Kontexte **Perfekt für**: Mode, Accessoires, Körperpflege * Personen, die Produkte benutzen oder tragen * Natürliche Umgebungen * Authentische Situationen **Tipps**: * Beziehen Sie, wenn möglich, vielfältige Models ein * Zeigen Sie Produkte in realistischen Anwendungsfällen * Behalten Sie den Fokus auf verkaufbaren Artikeln #### Produkt‑Präsentationen **Perfekt für**: Technische Produkte, Kollektionen, Neuerscheinungen * Saubere, minimale Hintergründe * Fokussierte Produktanordnungen * Professionelles Styling **Tipps**: * Verwenden Sie neutrale Hintergründe, die nicht konkurrieren * Stellen Sie hohen Kontrast zwischen Produkten und Hintergrund sicher * Schaffen Sie visuelle Hierarchie durch Beleuchtung ### Farbe und Kontrast - Hinweise #### Hintergründe mit hohem Kontrast * **Vorteile**: Interaktive Punkte heben sich klar ab * **Am besten für**: Saubere, minimalistische Designs * **Beispiele**: Weiße Studiohintergründe, dunkle dramatische Szenen #### Hintergründe mit geringem Kontrast * **Vorteile**: Subtiler, anspruchsvoller Eindruck * **Herausforderungen**: Punkte könnten schwerer zu sehen sein * **Lösungen**: Verwenden Sie kontrastierende Punktfarben, fügen Sie subtile Schatten hinzu ## 📱 Mobiloptimierung ### Responsives Hintergrundverhalten * **Automatische Skalierung**: Bild passt sich der Bildschirmgröße an * **Erhaltung des Brennpunkts**: Wichtige Bereiche bleiben sichtbar * **Leistungsoptimierung**: Kleinere Bilder für mobile Geräte ### Mobile-spezifische Überlegungen * **Einfachere Kompositionen**: Weniger Elemente funktionieren besser auf kleinen Bildschirmen * **Größere Produkte**: Stellen Sie sicher, dass verkaufbare Artikel sichtbar sind * **Touch-Zugänglichkeit**: Lassen Sie Platz um interaktive Bereiche ### Alternative mobile Hintergründe Erwägen Sie die Verwendung unterschiedlicher Bilder für Mobilgeräte: * **Engere Zuschnitte**: Fokus auf Schlüsselprodukte * **Vertikale Ausrichtungen**: Besser für Hochformat-Bildschirme * **Vereinfachte Szenen**: Weniger ablenkende Elemente ## 🎨 Erweiterte Hintergrundtechniken ### Geschichtete Hintergründe Erzeugen Sie Tiefe mit mehreren Bildebenen: ```css .interactive-background { background-image: url('foreground-layer.png'), url('main-background.jpg'); background-position: center center, center center; } ``` ### Animierte Hintergründe Subtile Animationen können das Erlebnis verbessern: * **Parallax-Scrolling**: Hintergrund bewegt sich mit anderer Geschwindigkeit * **Subtile Bewegungen**: Sanfte Schwebe- oder Schaukeleffekte * **Farbübergänge**: Allmähliche Lichtveränderungen ### Saisonale Variationen Aktualisieren Sie Hintergründe für verschiedene Jahreszeiten: * **Feiertagsthemen**: Festliche Dekorationen und Farben * **Saisonale Produkte**: Sommerliche Außen- vs. winterliche Innenaufnahmen * **Werbezeiträume**: Verkaufsbezogenes Styling ## 🔍 Testen und Optimieren ### Leistungstests * **Ladegeschwindigkeit**: Überwachen Sie Bildladezeiten * **Mobile Leistung**: Testen Sie auf verschiedenen Geräten * **Bandbreitennutzung**: Berücksichtigen Sie datensensible Nutzer ### Visuelle Tests * **Verschiedene Bildschirmgrößen**: Tablet, Mobilgerät, Desktop, große Bildschirme * **Sichtbarkeit von Punkten**: Stellen Sie sicher, dass interaktive Elemente hervorgehoben sind * **Farbtreue**: Prüfen Sie auf verschiedenen Monitoren ### A/B-Test-Ideen * **Bildstile**: Lifestyle- vs. produktfokussiert * **Farbschemata**: Warme vs. kühle Töne * **Komplexitätsstufen**: Minimalistische vs. detaillierte Hintergründe * **Saisonale Relevanz**: Aktuelle vs. zeitlose Bildsprache ## 🐛 Fehlerbehebung ### Häufige Probleme #### Bild lädt nicht * **Überprüfen Sie die Dateigröße**: Stellen Sie sicher, dass sie unter den Plattformgrenzen liegt * **Format überprüfen**: Verwenden Sie unterstützte Formate (JPG, PNG, WebP) * **Dateiberechtigungen**: Bestätigen Sie, dass das Bild zugänglich ist #### Schlechte Anzeigequalität * **Auflösung**: Verwenden Sie Quellbilder mit höherer Auflösung * **Kompression**: Balance zwischen Dateigröße und Qualität * **Formatoptimierung**: Ziehen Sie WebP für bessere Kompression in Betracht #### Anzeigeprobleme auf Mobilgeräten * **Seitenverhältnis**: Testen Sie auf verschiedenen Bildschirmformaten * **Ladegeschwindigkeit**: Optimieren Sie für mobile Netzwerke * **Touch-Interaktionen**: Stellen Sie sicher, dass Punkte zugänglich bleiben ### Leistungsprobleme * **Langsames Laden**: Komprimieren Sie Bilder, verwenden Sie moderne Formate * **Speichernutzung**: Überwachen Sie Auswirkungen großer Dateien * **Bandbreitenbedenken**: Bieten Sie Alternativen mit niedrigerer Auflösung an ## 💡 Kreative Hintergrundideen ### Storytelling-Hintergründe * **Markenerzählung**: Zeigen Sie Unternehmensgeschichte oder Werte * **Kundenreise**: Verschiedene Lebensphasen oder Anwendungsfälle * **Produktevolution**: Vorher/Nachher-Szenarien ### Interaktive Umgebungen * **Virtuelle Showrooms**: Erstellen Sie physische Ladenlayouts nach * **Veranstaltungsräume**: Messen- oder Popup-Shop-Umgebungen * **Kundenräume**: Reale Kundenwohnungen oder Arbeitsplätze ### Künstlerische Ansätze * **Illustrierte Hintergründe**: Maßgeschneiderte Kunstwerke oder Grafiken * **Gemischte Medien**: Kombination aus Fotografie und Illustrationen * **Abstrakte Kompositionen**: Künstlerische Interpretationen von Markenthemen ## 📊 Analysen und Erkenntnisse ### Leistungskennzahlen für Hintergründe * **Engagement-Raten**: Verweildauer in interaktiven Abschnitten * **Klickmuster**: Wo Nutzer am meisten interagieren * **Conversion-Tracking**: Verkäufe aus verschiedenen Hintergründen * **Gerätepräferenzen**: Mobil vs. Desktop-Engagement ### Optimierung basierend auf Daten * **Heatmapping**: Identifizieren Sie die meistgeklickten Bereiche * **Conversion-Analyse**: Welche Hintergründe Verkäufe fördern * **Benutzerfeedback**: Befragen Sie Kunden zu visuellen Vorlieben * **Saisonale Performance**: Verfolgen Sie die Wirksamkeit von Hintergründen im Zeitverlauf --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.openspaces.design/german/plain-jane-interactive/sections-and-features/setting-the-background.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.