Bild-Editor
Der Bild-Editor ermöglicht es dir, Bilder hochzuladen und deren Darstellung als Hintergrundbild zu konfigurieren. Du kannst Position, Größe, Wiederholung und weitere Eigenschaften einstellen.
Voraussetzungen
- Du bearbeitest einen Block oder eine Einstellung, die Hintergrundbilder unterstützt
- Die entsprechende Konfiguration ist geöffnet
Aufbau der Seite
Der Bild-Editor besteht aus:
- Vorschau-Bereich: Zeigt das hochgeladene Bild oder Upload-Möglichkeit
- Upload-Schaltfläche: "Datei auswählen" für neue Bilder
- Löschen-Schaltfläche: Entfernt das aktuelle Bild
- Einstellungs-Bereich: Verschiedene Optionen für die Bilddarstellung (nur wenn "Einstellungen anzeigen" aktiviert ist)
So arbeitest du mit dieser Seite
Bild hochladen
- "Datei auswählen" klicken: Öffne den Datei-Browser
- Bilddatei wählen: Wähle PNG, JPG, JPEG oder GIF
- Upload abwarten: Fortschrittsanzeige zeigt den Fortschritt
- Vorschau prüfen: Das Bild erscheint im Vorschau-Bereich
Bilddarstellung konfigurieren
Wenn die Einstellungen verfügbar sind, kannst du folgende Optionen anpassen:
Position
Bestimmt, wo das Bild positioniert wird:
- center: Zentriert das Bild
- top: Oben ausgerichtet
- bottom: Unten ausgerichtet
- left: Links ausgerichtet
- right: Rechts ausgerichtet
- top left, top right, bottom left, bottom right: Ecken-Positionen
Größe
Kontrolliert, wie das Bild skaliert wird:
- cover: Füllt den gesamten Bereich, beschneidet bei Bedarf
- contain: Zeigt das komplette Bild, eventuell mit Leerraum
- auto: Originalgröße des Bildes
- 100%: Streckt das Bild auf die volle Breite
Attachment (Anheftung)
Bestimmt das Scroll-Verhalten:
- scroll: Bild scrollt mit dem Inhalt
- fixed: Bild bleibt beim Scrollen fest (Parallax-Effekt)
- local: Bild scrollt mit dem Element-Inhalt
Repeat (Wiederholung)
Kontrolliert, ob das Bild wiederholt wird:
- no-repeat: Bild wird nicht wiederholt
- repeat: Bild wird horizontal und vertikal wiederholt
- repeat-x: Nur horizontale Wiederholung
- repeat-y: Nur vertikale Wiederholung
Animation
Fügt Bewegungseffekte hinzu:
- none: Keine Animation
- fade-in: Bild blendet sich ein
- slide-in: Bild gleitet herein
- zoom-in: Bild zoomt herein
Deckkraft (Opacity)
- Schieberegler: Von 0 (transparent) bis 1 (vollständig sichtbar)
- Werte: 0.1 = sehr transparent, 1.0 = vollständig sichtbar
Bild entfernen
- "Löschen" klicken: Entfernt das aktuelle Bild
- Bestätigung: Das Bild wird sofort entfernt
- Upload-Bereich: Erscheint wieder für neue Uploads
Tipps und Hinweise
- Bildgröße optimieren: Verwende Bilder mit angemessener Auflösung
- Ladezeiten beachten: Große Bilder können die Website verlangsamen
- Kontrast prüfen: Stelle sicher, dass Text über dem Bild lesbar bleibt
- Mobile Ansicht testen: Prüfe, wie das Bild auf kleinen Bildschirmen aussieht
- Deckkraft nutzen: Reduziere die Deckkraft für bessere Textlesbarkeit
Empfohlene Einstellungen
Für Hero-Bereiche
- Position: center
- Größe: cover
- Attachment: scroll oder fixed (für Parallax)
- Repeat: no-repeat
- Deckkraft: 0.7-0.9 (damit Text lesbar bleibt)
Für Muster/Texturen
- Position: top left
- Größe: auto oder spezifische Größe
- Attachment: scroll
- Repeat: repeat
- Deckkraft: 0.1-0.3 (sehr subtil)
Für Akzent-Bereiche
- Position: center
- Größe: contain oder cover
- Attachment: scroll
- Repeat: no-repeat
- Animation: fade-in oder slide-in
Häufige Probleme lösen
- Bild zu groß: Verwende "cover" als Größe
- Bild verzerrt: Verwende "contain" oder "cover"
- Text nicht lesbar: Reduziere die Deckkraft
- Bild wiederholt sich ungewollt: Setze Repeat auf "no-repeat"
- Bild scrollt nicht mit: Ändere Attachment auf "scroll"