Asphyx: Die Seite wurde neu angelegt: „''Im Hintergrund-Tab werden Bilder hochgeladen und verwaltet, die als Hintergründe, Produktbilder oder grafische Inhalte innerhalb der Website verwendet werden.'' Zur Übersicht: AAM Editor Hosting == Hintergrund-Tab == Der Hintergrund-Tab verwaltet den zentralen Bilderbestand des Projekts. Hochgeladene Bilder können anschließend in verschiedenen Sektionen ausgewählt und mehrfach verwendet werden. Typische Einsatz…“

2026-07-13T11:51:52Z

Die Seite wurde neu angelegt: „''Im Hintergrund-Tab werden Bilder hochgeladen und verwaltet, die als Hintergründe, Produktbilder oder grafische Inhalte innerhalb der Website verwendet werden.'' Zur Übersicht: AAM Editor Hosting == Hintergrund-Tab == Der Hintergrund-Tab verwaltet den zentralen Bilderbestand des Projekts. Hochgeladene Bilder können anschließend in verschiedenen Sektionen ausgewählt und mehrfach verwendet werden. Typische Einsatz…“

Neue Seite

''Im Hintergrund-Tab werden Bilder hochgeladen und verwaltet, die als Hintergründe, Produktbilder oder grafische Inhalte innerhalb der Website verwendet werden.''

Zur Übersicht: [[:Kategorie:AAM Editor Hosting|AAM Editor Hosting]]

== Hintergrund-Tab ==

Der Hintergrund-Tab verwaltet den zentralen Bilderbestand des Projekts. Hochgeladene Bilder können anschließend in verschiedenen Sektionen ausgewählt und mehrfach verwendet werden.

Typische Einsatzbereiche sind:

<ul>
<li>Hero-Hintergründe</li>
<li>Sektionshintergründe</li>
<li>Produktbilder und Buchcover</li>
<li>Kartenhintergründe</li>
<li>Galerien und Fotoalben</li>
<li>Open-Graph-Vorschaubilder</li>
</ul>

== Bilder hochladen ==

<ol>
<li>Den '''Hintergrund-Tab''' öffnen.</li>
<li>Auf '''+ Hochladen''' klicken.</li>
<li>Eine oder mehrere Bilddateien auswählen.</li>
<li>Den Upload vollständig abwarten.</li>
<li>Die hochgeladenen Bilder erscheinen anschließend im Bilderbestand.</li>
</ol>

Mehrere Dateien können gemeinsam ausgewählt und nacheinander hochgeladen werden.

== Unterstützte Bildformate ==

Geeignete Formate sind:

<ul>
<li>JPG und JPEG</li>
<li>PNG</li>
<li>WebP</li>
<li>GIF</li>
</ul>

Je nach Sektion oder Browser können zusätzlich SVG-Dateien unterstützt werden. Für normale Fotos und Hintergründe sind JPG oder WebP meist am besten geeignet.

== Bilder in Sektionen verwenden ==

<ol>
<li>Die gewünschte Seite öffnen.</li>
<li>Die betreffende Sektion auswählen.</li>
<li>Das Feld für Bild oder Hintergrundbild öffnen.</li>
<li>Auf '''Bild auswählen''' klicken.</li>
<li>Das gewünschte Bild aus dem Bilderbestand auswählen.</li>
<li>Darstellung und Zuschnitt in der Vorschau kontrollieren.</li>
</ol>

Dasselbe Bild kann auf mehreren Seiten und in mehreren Sektionen verwendet werden.

== Hero-Hintergrund festlegen ==

<ol>
<li>Die Hero-Sektion auswählen.</li>
<li>Das Feld für das Hintergrundbild öffnen.</li>
<li>Ein Bild aus dem Hintergrund-Tab auswählen oder neu hochladen.</li>
<li>Position, Abdunklung und Textlesbarkeit prüfen.</li>
</ol>

Das Hero-Bild kann vom [[AAM Editor – SEO konfigurieren|SEO-Bereich]] automatisch als Open-Graph-Vorschaubild vorgeschlagen werden.

== Kartenhintergründe ==

Im Karten-Grid kann jede Karte ein eigenes Hintergrundbild besitzen.

Zusätzlich können eingestellt werden:

<ul>
<li>Hintergrundfarbe</li>
<li>Bilddatei</li>
<li>Abdunklung des Bildes</li>
<li>Textfarbe</li>
<li>Position und Zuschnitt</li>
</ul>

Weitere Informationen enthält [[AAM Editor – Kartenhintergründe gestalten|Kartenhintergründe gestalten]].

== Bilder ersetzen ==

Soll ein Bild in einer Sektion ausgetauscht werden:

<ol>
<li>Die betreffende Sektion auswählen.</li>
<li>Das vorhandene Bildfeld öffnen.</li>
<li>Ein anderes Bild aus dem Bestand auswählen oder neu hochladen.</li>
<li>Die Darstellung in der Vorschau prüfen.</li>
<li>Projekt speichern und exportieren.</li>
</ol>

Das bisherige Bild bleibt im Bilderbestand erhalten, solange es nicht separat gelöscht wird.

== Bilder löschen ==

<ol>
<li>Im Hintergrund-Tab das gewünschte Bild suchen.</li>
<li>Das Löschsymbol anklicken.</li>
<li>Die Sicherheitsabfrage bestätigen.</li>
</ol>

Vor dem Löschen muss geprüft werden, ob das Bild noch auf einer Seite verwendet wird.

Wird eine weiterhin eingebundene Datei entfernt, können auf der veröffentlichten Website fehlerhafte oder leere Bildbereiche entstehen.

== Sichere Reihenfolge beim Löschen ==

<ol>
<li>Alle Sektionen prüfen, die das Bild verwenden.</li>
<li>Das Bild dort ersetzen oder entfernen.</li>
<li>Projekt speichern.</li>
<li>Die Website kontrollieren.</li>
<li>Erst danach die Bilddatei aus dem Bestand löschen.</li>
</ol>

Nicht mehr verwendete Dateien können zusätzlich über [[AAM Editor – Server aufräumen und Papierkorb|Server aufräumen und Papierkorb]] ermittelt werden.

== Bildgröße und Auflösung ==

Für großflächige Hintergründe empfiehlt sich eine ausreichende Auflösung.

Als Richtwert:

<ul>
<li>'''Hero- und Seitenhintergründe:''' mindestens etwa 1920 × 1080 Pixel</li>
<li>'''Karten und Produktbilder:''' mindestens etwa 1200 × 800 Pixel</li>
<li>'''Buchcover und Hochformate:''' passende Hochformat-Auflösung</li>
<li>'''kleine Vorschaubilder:''' abhängig von der tatsächlichen Darstellung</li>
</ul>

Sehr große Originaldateien sollten vor dem Upload optimiert werden.

== Dateigröße ==

Bilder mit mehreren Megabyte können den Upload und die Ladezeit der Website unnötig verlangsamen.

Empfehlungen:

<ul>
<li>Fotos als JPG oder WebP speichern.</li>
<li>PNG hauptsächlich für Transparenz oder Grafiken verwenden.</li>
<li>Unnötig hohe Auflösungen reduzieren.</li>
<li>Bilddateien möglichst unter etwa 1 MB halten.</li>
<li>Große Bilder vor dem Upload komprimieren.</li>
</ul>

Die zulässige maximale Dateigröße hängt von der Serverkonfiguration ab.

== Automatische Optimierung ==

Der Editor kann hochgeladene Bilder automatisch für die Webdarstellung aufbereiten.

Abhängig von der Installation können dabei:

<ul>
<li>Bilder komprimiert</li>
<li>WebP- oder JPG-Versionen erzeugt</li>
<li>unterschiedliche Größen erstellt</li>
<li>Dateien für mobile Geräte optimiert</li>
</ul>

werden.

Trotz automatischer Optimierung sollten keine unnötig großen Ausgangsdateien hochgeladen werden.

== Bildausschnitt und Seitenverhältnis ==

Ein Hintergrundbild wird häufig so skaliert, dass es den vollständigen Bereich ausfüllt. Dabei können Teile des Bildes abgeschnitten werden.

Bei der Bildauswahl sollte deshalb geprüft werden:

<ul>
<li>ob das Hauptmotiv mittig oder passend positioniert ist</li>
<li>ob wichtige Bildbereiche auf Mobilgeräten sichtbar bleiben</li>
<li>ob Text über dem Bild lesbar ist</li>
<li>ob Hoch- und Querformat sinnvoll eingesetzt werden</li>
</ul>

Für wichtige Motive kann eine alternative Bilddatei mit angepasstem Ausschnitt sinnvoll sein.

== Text über Hintergrundbildern ==

Text muss auch auf detailreichen oder hellen Bildern lesbar bleiben.

Mögliche Maßnahmen:

<ul>
<li>Bild abdunkeln</li>
<li>Textfarbe anpassen</li>
<li>ruhigere Bildbereiche verwenden</li>
<li>Textschatten oder Hintergrundfläche einsetzen</li>
<li>Bild mit weniger Details auswählen</li>
</ul>

Die Darstellung sollte auf Desktop- und Mobilansicht geprüft werden.

== Hintergrund-Tab und Medien-Tab ==

Der Hintergrund-Tab dient hauptsächlich der komfortablen Bildauswahl innerhalb visueller Sektionen.

Der [[AAM Editor – Medien verwalten|Medien-Tab]] ist dagegen der allgemeine Dateimanager für:

<ul>
<li>Bilder</li>
<li>PDF-Dateien</li>
<li>Archive</li>
<li>Downloads</li>
<li>Dokumente</li>
<li>weitere Dateitypen</li>
</ul>

Bilder für wiederverwendbare Sektionen können je nach Arbeitsweise in beiden Bereichen verfügbar sein.

== Empfehlungen ==

<ul>
<li>Bilder vor dem Upload sinnvoll benennen.</li>
<li>Einheitliche Formate und Seitenverhältnisse verwenden.</li>
<li>Sehr große Dateien vorab komprimieren.</li>
<li>Wichtige Motive nicht direkt am Bildrand platzieren.</li>
<li>Textlesbarkeit über Hintergrundbildern prüfen.</li>
<li>Darstellung auch auf schmalen Bildschirmen kontrollieren.</li>
<li>Bilder erst löschen, wenn keine Sektion mehr darauf verweist.</li>
<li>Nicht mehr benötigte Dateien regelmäßig über die Serverbereinigung entfernen.</li>
</ul>

== Weiterführende Seiten ==

<ul>
<li>[[AAM Editor – Medien verwalten|Medien verwalten]]</li>
<li>[[AAM Editor – Kartenhintergründe gestalten|Kartenhintergründe gestalten]]</li>
<li>[[AAM Editor – Sektionsfarben verwenden|Sektionsfarben verwenden]]</li>
<li>[[AAM Editor – SEO konfigurieren|SEO konfigurieren]]</li>
<li>[[AAM Editor – Server aufräumen und Papierkorb|Server aufräumen und Papierkorb]]</li>
</ul>

[[Kategorie:AAM Editor – Gestaltung und Medien|Hintergrundbilder verwalten]]

AAM Editor – Hintergrundbilder verwalten - Versionsgeschichte