# 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