Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Ein Hintergrundbild hinzufügen

Hintergrundbilder werden hinter dem eigentlichen Inhalt Ihrer Website angezeigt. Sie sind ein zusätzliches visuelles Element, mit dem Sie das Erscheinungsbild Ihrer Website entscheidend beeinflussen können.

Bei zahlreichen Squarespace-Templates können Sie Hintergrundbilder einfügen. Die Styles für Hintergrundbilder variieren je nach Template, die meisten gelten jedoch für die gesamte Website, d. h., auf allen Seiten Ihrer Website wird das gleiche Bild angezeigt. Sämtliche Hintergrundbilder lassen sich als Vollbild darstellen, sodass sie die jeweilige Seite im Browser bis zum Rand ausfüllen.

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.

Unterstützte Templates

Folgende Templates unterstützen Hintergrundbilder über die gesamte Seitenbreite. Die Templates sind in Gruppen eingeteilt.

  • Adirondack
  • Avenue
  • Aviator-Gruppe (Aubrey, Aviator) - Zusätzlich wird für die Info-Seite ein seitenspezifisches Hintergrundbild unterstützt.
  • Five
  • Forte
  • Momentum
  • Montauk-Gruppe (Julia, Kent, Montauk, Om)
  • Native
Tipp: Wenn Ihr Template keine seitenübergreifenden Hintergrundbilder unterstützt, finden Sie hier nähere Informationen zum Erstellen von seitenspezifischen Hintergrundbildern.

Step 1 - Go to Site Styles

In the Home Menu, click Design, then click Site Styles. For more help using Site Styles, visit Making style changes.

Hinweis: Um bei den Templates Aviator oder Aubrey ein seitenspezifisches Hintergrundbild hinzuzufügen, öffnen Sie zunächst das Seiten-Menü und dann die Info-Seite. Öffnen Sie anschließend eine beliebige andere Seite, um den seitenübergreifenden Hintergrund hinzuzufügen.

Schritt 2 – Ein Bild hinzufügen

The tweak name varies by template, but look for a tweak in Site Styles named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it. 

Um eines Ihrer eigenen Bilder zu verwenden, ziehen Sie Ihr Bild in den Bild-Uploader. Sie können auch auf den Bild-Uploader klicken, um ein Dateiauswahlmenü zu öffnen und dann eine Datei auf Ihrem Computer auszuwählen.

Alternatively, click Search For Image to add a free or premium stock image. This is a great option if you don't already have an image to use. To learn more, visit Searching and adding stock images.

add_background_image.jpg

Schritt 3 - Das Bild bearbeiten 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.

Position

Bestimmen Sie die Position des Banner-Bildes:

  • 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)
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.

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.

Schritt 4 - Andere Bereiche der Website anpassen

How much of your background image displays depends on how you set up your other site elements. The style options and tweak names vary from template to template, but use your Site Styles to experiment with some or all of the following areas of your site:

  • Hintergrund des Hauptinhaltsbereichs (oder der "Leinwand")
  • Hintergrund der Kopfzeile
  • Hintergrund der Fußzeile
  • Breite der Website und des Inhalts
Tipp: Es empfiehlt sich, die Hintergrundfarben teilweise opak einzustellen, sodass das Hintergrundbild durchscheint.
Hinweis: Während ein Hintergrund- oder Banner-Bild lädt, wird unter Umständen die Hintergrund- oder Overlay-Farbe angezeigt.

Schritt 5 - Speichern

Klicken Sie auf Save (Speichern), um Ihre Änderungen zu veröffentlichen.

Schritt 6 – Finden Sie heraus, wie Ihre Website auf Mobilgeräten aussieht (optional)

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.
  • See our troubleshooting tips for Site Styles tweaks that work well on mobile.

Fehlerbeseitigung

Mein Hintergrundbild wirkt auf bestimmten Seiten oder Mobilgeräten verzerrt

This occurs when the background image is stretching to cover the length of the browser window. This is especially true for Blog Pages or Events Pages set to List view, since they are typically longer than other pages, and for mobile, where page content stacks vertically. The taller the page content, the more stretched the background will be to fully cover it, and the more zoomed in it will appear. 

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 Aviator und Aubrey müssen Sie zusätzlich die Option Mobile Background Image (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.

Hier sehen Sie ein Beispiel mit dem Template Forte:

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

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

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

  • Diese Funktionalität gibt es bei Aviator und Aubrey.

aviator-backgrounds.gif

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 können einen Inhalt-Overlay unterstützen. In Templates der Brine-Gruppe können Sie beispielsweise mithilfe von Blöcken in einem Einführungsbereich Inhalte verschiedenster Art über 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 Standard-Seitenbereich hinzuzufügen.
War dieser Beitrag hilfreich?
31 von 218 fanden dies hilfreich