Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Hintergrundbilder für die gesamte Website hinzufügen

Hintergrundbilder werden hinter Ihrem Website-Inhalt angezeigt und fügen ein visuelles Element hinzu, um den Ton für Ihre Website zu bestimmen. In diesen Template-Gruppen können Sie Hintergrundbilder für die gesamte Website hinzufügen:

  • Adirondack
  • Avenue
  • Aviator – Die Info-Seite unterstützt außerdem ein seitenspezifisches Hintergrundbild.
  • Five
  • Forte
  • Momentum
  • Montauk
  • Native

Sämtliche Hintergrundbilder lassen sich als Vollbild darstellen, sodass diese die jeweilige Seite im Browser bis zum Rand ausfüllen. 

Tipp: Wenn Ihr Template keine seitenübergreifenden Hintergrundbilder unterstützt, finden Sie hier nähere Informationen zum Erstellen von seitenspezifischen Hintergrundbildern.

Ein Video anschauen

Bewährte Verfahrensweisen

Die Art des von Ihnen gewählten Bildes hängt von Ihrem persönlichen Geschmack und dem jeweiligen Zweck Ihrer Website ab. Nachfolgend finden Sie ein allgemeine Orientierungshilfe:

  • Zur Nutzung von Hintergrundbildern im Vollbildformat empfehlen wir, Bilder mit einer Breite von 1500 bis 2500 Pixeln hochzuladen. 
  • Abstrakte Muster und Bilder ohne Text oder Begrenzungen lassen sich im Allgemeinen besser verwenden, da sie flexibler zugeschnitten werden können, was zu einem gewissen Grad fast immer erforderlich ist.
  • Sich wiederholende Muster bieten beim Entwurf der Bildanzeige die größte Flexibilität.
  • Hintergrundbilder werden nicht übertragen, wenn Sie das Template wechseln.

Bildform

Hintergrundbilder im Vollbildformat werden auf Mobilgeräten und Desktops unterschiedlich zugeschnitten, da Mobilgeräte normalerweise im Hochformat verwendet werden.

Bei der Auswahl eines Hintergrundbildes sollten Sie bedenken, wie Besucher auf Ihre Website zugreifen:

  • Wenn Sie davon ausgehen, dass Besucher Ihre Website auf Mobilgeräten aufrufen werden, können Sie den Zuschnitt durch die Auswahl eines Hintergrundbildes minimieren, dessen Bildhöhe die Bildbreite übersteigt.
  • Wenn die meisten Besucher Ihre Website auf einem Desktop öffnen werden, sollten Sie ein Bild im Querformat oder ein nahezu rechteckiges Bild verwenden.
  • Für Websites mit gemischtem Zugriff sollten Sie ein Hintergrundbild auswählen, das sich auf verschiedene Arten zuschneiden lässt.

Das Bild hinzufügen

So fügen Sie einen Hintergrund für die gesamte Website hinzu:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stile.
  2. Suchen Sie nach einer Anpassung namens Hintergrundbild, Website-Hintergrundbild oder Seiten-Hintergrundbild. Klicken Sie auf die Anpassung, um sie zu öffnen und Ihr Bild hinzuzufügen.
  3. Gestalten Sie das Bild und klicken Sie dann auf Speichern, um Ihre Änderungen zu veröffentlichen.

In Adirondack sieht die Anpassung folgendermaßen aus:

background-image-tweak.png

Bilder hinzufügen

Um eines Ihrer eigenen Bilder zu verwenden, ziehen Sie Ihr Bild in den Bild-Uploader. Sie können auch:

Das Bild gestalten und zuschneiden

Nachdem Sie das Hintergrundbild hinzugefügt haben, können Sie die unterhalb des Bild-Uploaders aufgeführten Optionen verwenden, um das Bild zu bearbeiten und unerwünschte Zuschnitte oder Verzerrungen beheben.

Size (Größe)
  • Auto - Das Bild behält seine Originalgröße und -breite. Dies ist gut für kleinere Bilder geeignet, die Sie wiederholt verwenden möchten.
  • Cover (Abdecken) - Skaliert das Bild so, dass es den Hintergrundbereich vollkommen abdeckt (Vollbild). Daher wird möglicherweise nicht das gesamte Bild angezeigt. Je nach Höhe des Seiteninhalts kann das Bild auf jeder Seite anders aussehen.
  • Contain (Eingrenzen) - Skaliert das Bild so, dass sein längster Rand (Breite oder Höhe) in den Browser passt. 

Bei Auto oder Contain kann die Hintergrundfarbe der Website hinter dem Bild angezeigt werden. Verwenden Sie die Anpassung Repeat (Wiederholen), um dies zu korrigieren.

Position

Bestimmen Sie die Position des Hintergrundbildes:

  • Top Left, Top Center, Top Right (oben links, oben mittig, oben rechts)
  • Center Left, Center Center, Center Right (Mitte links, Mitte mittig, Mitte rechts)
  • Bottom Left, Bottom Center, Bottom Right (unten links, unten mittig, unten rechts)
Repeat (Wiederholen)

Vergewissern Sie sich, dass Size (Größe) auf Auto oder Contain (Eingrenzen) eingestellt ist.

    • No-repeat (Nicht wiederholen) - Das Bild ein Mal anzeigen.
    • Repeat (Wiederholen) - Das Bild wiederholen, sodass es den ganzen Hintergrund abdeckt.
    • Repeat-X (Wiederholen X) - Das Bild nur entlang der waagerechten Achse wiederholen.
    • Repeat-Y (Wiederholen Y) - Das Bild nur entlang der senkrechten Achse wiederholen.

Verwenden Sie für No-repeat, Repeat-X und Repeat-Y die Positionierungsoptionen, um festzulegen, wo genau das Bild angezeigt werden soll.

Fix Position (Feste Position)

Wenn diese Option aktiviert ist, wird die Bildposition hinter den scrollenden Inhalten beibehalten. Wenn diese Option deaktiviert ist, scrollt das Bild mit der Seite nach oben und unten.

In zahlreichen mobilen Browsern, darunter auch iOS, hat diese Funktion keinerlei Auswirkung. Das Bild scrollt gemeinsam mit der Seite.

Andere Website-Bereiche gestalten

Wie viel von Ihrem Hintergrundbild angezeigt wird, hängt von der Konfiguration der anderen Elemente Ihrer Website ab. Die Stil-Optionen und Namen der Anpassungen variieren je nach Vorlage, Sie können jedoch Website-Stil verwenden, um mit einigen oder allen der folgenden Bereiche Ihrer Website zu experimentieren:

  • Hintergrund des Hauptinhaltsbereichs (oder der "Leinwand")
  • Hintergrund der Kopfzeile
  • Hintergrund der Fußzeile
  • Breite der Website und des Inhalts

Beachten Sie dabei folgende Tipps:

  • Es empfiehlt sich, die Hintergrundfarben teilweise deckend einzustellen, sodass das Hintergrundbild durchscheint.
  • Während ein Hintergrund- oder Banner-Bild lädt, wird unter Umständen die Hintergrund- oder Overlay-Farbe angezeigt.

Schauen Sie sich an, wie Ihre Website auf Mobilgeräten aussieht

Auf Desktops und Mobilgeräten wird dasselbe Hintergrundbild angezeigt. Um sich einen Überblick über Ihre Änderungen zu verschaffen, sollten Sie Ihr Mobilgerät immer griffbereit haben und die Browseransicht auf Ihrem Gerät aktualisieren, nachdem Sie die gewünschten Änderungen auf einem Desktop-PC gespeichert haben. Die Geräteansicht bietet Ihnen eine schnelle Vorschau, die Sie während der Bearbeitung auf dem Desktop-PC verwenden können.

Tipps:

  • Bei der Auswahl eines Hintergrundbildes gilt es zu bedenken, dass die Form des Bildes die Darstellung auf Mobilgeräten stark beeinflussen kann.
  • In unseren Tipps zur Fehlerbehebung erfahren Sie mehr über Anpassungen, die auf Mobilgeräten besonders gut funktionieren.

Fehlerbeseitigung

Mein Hintergrundbild wirkt auf bestimmten Seiten oder Mobilgeräten verzerrt

Dies geschieht, wenn das Hintergrundbild gestreckt wird, um die gesamte Länge des Browserfensters abzudecken. Dies trifft vor allem auf Blogseiten oder Veranstaltungsseiten zu, die auf die Listenansicht eingestellt sind, da diese normalerweise länger als andere Seiten sind. Gleiches gilt für Mobilgeräte, bei denen der Seiteninhalt senkrecht gestapelt wird. Je länger der Seiteninhalt, desto mehr wird das Hintergrundbild gestreckt, um den Inhalt vollständig abzudecken, und desto stärker vergrößert erscheint es. 

Um dies zu beheben, öffnen Sie die Anpassung „Hintergrundbild“ (siehe Schritt 3 oben) und probieren Sie eine oder beide der folgenden Möglichkeiten aus:

  • Setzen Sie einen Haken bei Fix Position (Feste Position) (Hinweis: Dies hat bei einigen Mobilgeräten, einschließlich iOS-Geräten, keine Auswirkungen)
  • Wählen Sie Size: Contain (Größe: Eingrenzen) oder Size: Auto (Größe: Auto)

Sie können auch mit den Positionierungsoptionen experimentieren, um zu sehen, bei welcher Version die Größenänderung auf langen Seiten und Mobilgeräten am besten wirkt.

Mein Bild ist unscharf oder pixelig

Dies geschieht, wenn ein Bild über seine ursprünglichen Abmessungen hinaus gestreckt wird, um den Hintergrundbereich auszufüllen. 

Zur Nutzung von Bildern im Vollbildformat empfehlen wir für die meisten Websites, Bilder mit einer Breite von 1500 bis 2500 Pixeln hochzuladen.

Hinweis: Wir empfehlen, keine Hintergrundbilder hochzuladen, die an der längsten Seite mehr als 2500 Pixel aufweisen. Hintergrundbilder, die die gesamte Breite der Website einnehmen, werden immer mit der ursprünglichen Bildgröße geladen. Wenn Ihr Hintergrundbild breiter als 2500 Pixel ist, kann dies für Ihre Besucher zu Problemen führen.

Hintergrundbilder und benutzerdefinierter Code

Benutzerdefinierter Code, den Sie zu Ihrer Website hinzugefügt haben, kann die Darstellung Ihres Hintergrundbildes beeinträchtigen. Wenn Sie Probleme mit Ihrem Hintergrundbild beheben, deaktivieren Sie zeitweilig jeglichen benutzerdefinierten Code, um festzustellen, ob die Probleme damit zusammenhängen. Näheres erfahren Sie hier: Benutzerdefinierten HTML-, CSS- und JavaScript-Code einfügen.

Darstellung auf Mobilgeräten

An dieser Stelle erfahren Sie, wie Sie Style-Anpassungen zur Behebung von gängigen Darstellungsproblemen auf Mobilgeräten einsetzen. Da keine separaten Anpassungsmöglichkeiten für Mobilgeräte und Desktop-Computer vorhanden sind, sollten Sie ein wenig mit den folgenden Optionen herumexperimentieren. Auf diesem Weg finden Sie heraus, welche Einstellungen zum idealen Erscheinungsbild führen.

  • Vergrößertes oder verzerrtes Bild - Verwenden Sie die Bildeinstellungen Size: Contain (Größe: Eingrenzen) oder Size: Auto (Größe: Auto). Unter Umständen müssen Sie zudem ein größeres Bild hochladen, das an seinem längsten Punkt bis zu 2500 Pixel aufweist.
  • Größe des Hintergrundbildes verändert sich je nach Seite - Verwenden Sie die Bildeinstellungen Size: Contain (Größe: Eingrenzen) oder Size: Auto (Größe: Auto).
  • Bild wird nicht korrekt zentriert - Verwenden Sie die Positionierungsoptionen zur Anpassung der Bilddarstellung auf der Seite.
  • Hintergrundbild wird nicht angezeigt – Die Hintergrundfarbe Ihres Hauptinhalts verdeckt möglicherweise das Hintergrundbild. Passen Sie die Transparenz an, um das Hintergrundbild korrekt darzustellen. (Diese Einstellung kann die Desktop-Ansicht beeinflussen.) Stellen Sie sicher, dass Ihr Originalbild an seinem längsten Punkt weniger als 2500 Pixel aufweist, da größere Bilder möglicherweise nicht dargestellt werden können. In der Aviator-Familie müssen Sie zusätzlich die Anpassung Hintergrundbild für Mobilgeräte aktivieren.
  • Bild deckt nicht den gesamten Container ab - Wählen Sie Size: Auto (Größe: Auto) oder Size: Contain (Größe: Eingrenzen) und dann Repeat (Wiederholen), damit das Bild sämtliche leeren Flächen abdeckt.

Beispiele

Experimentieren Sie mit den Optionen in der Anpassung Background Image (Hintergrundbild), um die perfekte Anordnung Ihres Hintergrundbildes zu finden. Nachfolgend finden Sie einige Beispiele, die Ihnen als Inspiration dienen sollen.

Hier sehen Sie ein Beispiel mit dem Template Montauk:

  • Size: Cover (Größe: Abdecken)
  • Fixed position (Feste Position)
  • Canvas Background (Leinwand-Hintergrundfarbe) ist auf teilweise opak eingestellt.

Beispiel für ein Hintergrundbild in der Vorlage „Montauk“.

Hier sehen Sie ein Beispiel mit dem Template Forte:

  • Size: Auto (Größe: Auto)
  • Repeat: Repeat (Wiederholen: Wiederholen)

Beispiel für ein Hintergrundbild in der Vorlage „Forte“.

Hier sehen Sie ein Beispiel mit dem Template Native:

  • Position: Top Left (Position: oben links)
  • Size: Auto (Größe: Auto), Repeat-Y (Wiederholen-Y)
  • Website-Hintergrundfarbe: Blau

Beispiel für ein Hintergrundbild in der Vorlage „Native“.

Und hier sehen Sie das Aviator-Template mit einem Hintergrund, der für die gesamte Website gilt, und einem weiteren, der spezifisch für die Info-Seite gilt:

Websiteweite und Einleitungsseitenspezifische Hintergründe in der Vorlage „Aviator“.

Seitenspezifische Hintergrundbilder hinzufügen

Sie haben mehrere Möglichkeiten, ein Hintergrundbild auf einer bestimmen Seite zu erstellen.

  • Cover-Seiten - Cover-Seiten sind in sämtlichen Templates verfügbar und unterstützen Texte, Buttons, Überschriften, Logos und Formulare. Sie bieten die Möglichkeit, eine Einzelseite mit eigenen Styles zu erstellen, ohne die Kopfzeile, Navigation und Fußzeilen der Website anzuzeigen. Diese Option eignet sich besonders gut, um eine einzelne Seite hervorzuheben.
  • Banner – Einige Templates unterstützen Banner-Bilder, die oben auf der Seite angezeigt werden und ein Content-Overlay unterstützen können. In Templates der Brine-Gruppe können Sie beispielsweise mithilfe von Blöcken in einem Intro-Bereich Inhalte verschiedenster Art in Ihrem Banner hinzufügen.
  • Abschnitt Index-Seite – Sie können in den Template-Gruppen Brine und Pacific einen Index verwenden, um ein Hintergrundbild hinter dem Layout-Seitenabschnitt hinzuzufügen.
War dieser Beitrag hilfreich?
37 von 262 fanden dies hilfreich
Hintergrundbilder für die gesamte Website hinzufügen