Hintergrundbild einstellen

Ein Stand mit Komponenten besteht aus einem Hintergrundbild und den Komponenten, die auf diesem Hintergrund angeordnet werden. Das Hintergrundbild wählen Sie im Reiter „Stand" über den Medienmanager aus.

Der Reiter „Stand"

cb-reiter-stand-leer.png
Der Reiter „Stand" eines neuen Standes, rechts der Kasten „Stand-Editor"

Links liegt die Szene, also die Fläche, auf der der Stand entsteht. Solange kein Hintergrundbild eingestellt ist, bleibt sie leer.

Rechts steht der Kasten Stand-Editor. Er enthält oben die Buttons „Speichern" und „Vorschau", darunter das Feld „Hintergrundbild" mit dem Button „Durchsuchen" und den Bereich „Komponenten". Den Kasten können Sie an der Kopfzeile verschieben und über die blauen Anfasser in der Größe ändern. Ein Doppelklick auf die Kopfzeile setzt Position und Größe zurück.

Schritt für Schritt

  1. Öffnen Sie den Reiter Stand.
  2. Klicken Sie im Kasten „Stand-Editor" neben „Hintergrundbild" auf Durchsuchen. Der Medienmanager öffnet sich und zeigt nur Bilder.
  3. Wählen Sie ein vorhandenes Bild aus, oder laden Sie ein neues hoch: Ablage „Stand-Medien" wählen, auf Hochladen klicken und die Datei im Dateidialog Ihres Computers auswählen.
  4. Klicken Sie das Bild an und tragen Sie bei den Angaben mindestens Name und Alt-Text ein. Klicken Sie danach auf Speichern im Angabenbereich.

cb-medienmanager.png
Das hochgeladene Bild ist markiert, die Angaben sind eingetragen

  1. Klicken Sie auf Übernehmen. Der Medienmanager schließt sich, das Bild erscheint in der Szene, und im Feld „Hintergrundbild" steht sein Pfad.

cb-reiter-stand-hintergrundbild.png
Das Hintergrundbild ist in die Szene übernommen

  1. Klicken Sie auf Speichern, erst dann ist das Hintergrundbild dauerhaft eingestellt.

Die Bedienung des Medienmanagers im Einzelnen beschreibt die Seite Medienmanager.

KI-Kennzeichnung des Hintergrundbildes

Ab Version 12.4.9 gibt es im Kasten „Stand-Editor" unter dem Feld „Hintergrundbild" den aufklappbaren Bereich KI-Informationen mit drei Feldern. Mit ihnen weisen Sie darauf hin, dass das Hintergrundbild mit künstlicher Intelligenz erzeugt wurde, so wie bei der Komponente „Bild". Der Bereich ist zugeklappt, solange das Bild nicht als KI-generiert gekennzeichnet ist; ein Klick auf „KI-Informationen" klappt ihn auf. Ist „KI-generiert" gesetzt, ist er beim Öffnen des Standes bereits aufgeklappt.

  • KI-generiert: Das Bild wurde mit KI erzeugt.
  • KI-Info anzeigen: Der Hinweis wird auf dem Stand angezeigt.
  • KI-Tool: Das Werkzeug, mit dem das Bild erzeugt wurde, zum Beispiel der Name eines Bildgenerators. Das Feld ist freiwillig.

Sind „KI-generiert" und „KI-Info anzeigen" gesetzt, erscheint unten rechts auf dem Hintergrundbild der Hinweis „Hintergrund KI-generiert", bei eingetragenem Werkzeug „Hintergrund KI-generiert (Werkzeug)". Das Wort „Hintergrund" macht deutlich, dass nur das Hintergrundbild gemeint ist und nicht der ganze Stand. Der Hinweis liegt unter den Komponenten und erscheint im Editor sofort, auf dem Stand nach dem Speichern. Ist nur „KI-generiert" gesetzt, wird kein Hinweis angezeigt.

Vorbelegung aus dem Medienmanager: Im Medienmanager können Sie bei jedem Bild „KI-generiert" und „KI-Tool" eintragen. Wählen Sie das Bild über „Durchsuchen" und ist im Medienmanager „Metadaten übernehmen" angehakt (die Voreinstellung), übernimmt der Stand-Editor beide Angaben in seine Felder. „KI-Info anzeigen" wird dabei nicht verändert. Ohne den Haken bleiben die Felder im Stand-Editor, wie sie sind.

Hinweis verschieben: Der Hinweis trägt die CSS-Klasse scene-background-ai und lässt sich im Reiter „Einstellungen" im Feld „Individuelles CSS" verschieben oder umgestalten. Die Abstände des Bildes vom Rand der Szene stehen dort als Variablen --scene-bg-inset-left, --scene-bg-inset-right, --scene-bg-inset-top und --scene-bg-inset-bottom zur Verfügung. So steht der Hinweis zum Beispiel links unten auf dem Bild:

.scene-background-ai {
    left: calc(var(--scene-bg-inset-left, 0px) + 12px);
    right: auto;
}

Und so links oben:

.scene-background-ai {
    left: calc(var(--scene-bg-inset-left, 0px) + 12px);
    right: auto;
    top: calc(var(--scene-bg-inset-top, 0px) + 12px);
    bottom: auto;
}

Die Variablen sind nötig, weil ein Hintergrundbild, dessen Seitenverhältnis nicht dem der Szene (1920 × 1136 Pixel) entspricht, oben und unten oder links und rechts einen leeren Rand lässt. Ohne die Variablen stünde der Hinweis in diesem Rand und nicht auf dem Bild.

Darstellung für Besucher

Im Editor ist die Szene immer 1920 × 1136 Pixel groß, und das Hintergrundbild wird vollständig in sie eingepasst. Hat das Bild ein anderes Seitenverhältnis, bleiben oben und unten oder links und rechts leere Streifen. Dort platzieren Sie die Komponenten auf dem Bild.

Auf der Standseite für Besucher zeigt die Expo-IP ab Version 12.4.10 nur den Ausschnitt, in dem etwas zu sehen ist: das Bild selbst und alle Komponenten, die darüber hinausragen. Die leeren Streifen fallen weg, und der Ausschnitt wird so groß dargestellt, wie er vollständig ins Fenster passt. Die Besucher müssen also nie scrollen, um den ganzen Stand zu sehen. Ein breites Bild reicht so bis an die Ränder der Seite, und unter dem Stand bleibt der Abstand zum folgenden Inhalt gleich, auch wenn das Fenster schmaler wird. Die Komponenten sitzen dabei immer genau an der Stelle auf dem Bild, an der Sie sie platziert haben.

Links und rechts bleiben weiße Ränder, wenn das Fenster im Verhältnis breiter ist als das Bild oder wenn das Bild weniger Pixel breit ist als das Fenster. Wie weit ein Bild vergrößert werden darf, steuert der folgende Haken.

Hintergrundbild verbreitern

Unter dem Feld „Hintergrundbild" steht der Haken Hintergrundbild verbreitern.

  • Ohne Haken (Vorgabe) wird das Bild höchstens so breit dargestellt, wie es Pixel hat, mindestens aber so groß wie die Szene des Editors. Ein Bild mit 3000 Pixel Breite darf also auf einem breiten Bildschirm bis zu 3000 Pixel breit werden, ein schmaleres Bild bleibt entsprechend kleiner und scharf.
  • Mit Haken wird das Bild so weit vergrößert, wie das Fenster es zulässt, auch über seine eigene Breite hinaus. Es kann dann unscharf wirken.

Für eine Darstellung bis an die Ränder empfiehlt sich deshalb ein Bild, das mindestens so breit ist wie die Bildschirme Ihrer Besucher, etwa 2560 oder 3000 Pixel. Der Haken wirkt nur auf der Standseite für Besucher, im Editor ändert sich nichts.

Speichern

Der Button „Speichern" oben im Kasten „Stand-Editor" und der grüne Button „Speichern" unten auf der Seite tun dasselbe: Beide speichern den gesamten Stand, also auch Änderungen auf den anderen Reitern wie „Einstellungen" oder „Kontaktinformationen". Nach dem Speichern öffnet sich die Seite wieder auf dem Reiter, auf dem Sie zuletzt waren.

Achtung: Die Seite warnt nicht vor ungespeicherten Änderungen. Wenn Sie ein Hintergrundbild übernehmen und die Seite danach verlassen, ohne zu speichern, ist die Änderung verloren.

Hintergrundbild ändern

Um ein anderes Hintergrundbild einzustellen, klicken Sie erneut auf „Durchsuchen" und gehen wie oben beschrieben vor.

Ein Hintergrundbild lässt sich nicht entfernen, sondern nur durch ein anderes ersetzen.

Das Feld „Hintergrundbild" zeigt nur an, welches Bild eingestellt ist. Eine Adresse, die Sie dort von Hand eintragen, wird nicht übernommen. Das Hintergrundbild wird immer über „Durchsuchen" gewählt.