Anmerkung: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind andere Anleitungen 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.

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, Aubrey, Encore – Zusätzlich wird für die Info-Seite ein seitenspezifisches Hintergrundbild unterstützt.
  • Five
  • Forte
  • Momentum
  • Montauk, Julia, Kent, Om
  • Native
Tipp: Bei jedem Template können Sie mithilfe von Cover-Seiten einen seitenspezifischen Hintergrund erstellen. Viele Templates unterstützen auch Banner-Bilder.

Schritt 1 - Den Style Editor aufrufen

Klicken Sie im Home Menu (Hauptmenü) auf Design und anschließend auf Style Editor.

Hinweis: Um bei den Templates Aviator, Aubrey oder Encore 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 websiteübergreifenden Hintergrund hinzuzufügen.

Weitere Hilfestellung zur Verwendung des Style Editor finden Sie unter Style-Änderungen durchführen.

Schritt 2 – Ein Bild hinzufügen

Der genaue Name der Anpassung hängt vom verwendeten Template ab. Suchen Sie im Style Editor nach einer Anpassung mit der Bezeichnung Background Image (Hintergrundbild), Site Background Image (Hintergrundbild der Website) oder Page Background Image (Hintergrundbild der Seite). Klicken Sie dann auf die Anpassung, um sie zu öffnen.

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.

Alternativ können Sie auch auf Getty Images klicken, um die Lizenz für ein Archivbild für 10 $ zu erwerben. Dies ist eine großartige Möglichkeit, wenn Sie noch nicht über eigene Bilder verfügen, die Sie benutzen können. Um mehr zu erfahren, besuchen Sie die Übersicht über Getty Images und Squarespace.

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

Wie viel vom Hintergrundbild angezeigt wird, hängt von der Konfiguration der anderen Elemente Ihrer Website ab. Die Style-Optionen und Namen der Anpassungen variieren von Template zu Template, Sie können jedoch den Style Editor nutzen, 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
Tipp: Es empfiehlt sich, die Hintergrundfarben teilweise opak einzustellen, sodass das Hintergrundbild durchscheint.

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.
  • In unseren Tipps zur Fehlerbeseitigung erfahren Sie Näheres über Anpassungen im Style Editor, 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 Länge des Browserfensters abzudecken. Dies trifft vor allem auf Blog-Seiten oder Event-Seiten zu, die auf 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 größer 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: Benutzerdefiniertes HTML, CSS und JavaSript hinzufü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, Aubrey und Encore müssen Sie zusätzlich die Option Mobile Background Image (Mobiles Hintergrundbild) 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 Encore 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, Aubrey und Encore.

 

Sonstige Optionen

Einige Templates haben weitere editierbare Bereiche, denen Sie einen Button-Block hinzufügen können:

  • Kopfzeilen, mitunter auch Einleitungsbereiche genannt, werden auf Einzelseiten oberhalb des Seiteninhalts dargestellt.
  • Je nach Template können Inhalts-Seitenleisten auf einigen oder allen Seiten dargestellt werden.
  • Die meisten Templates unterstützen eine editierbare, websiteübergreifende Fußzeile. Dies ist insbesondere dann nützlich, wenn Besucher Ihren Call-to-Action (CTA) erst ganz am Ende zu Gesicht bekommen sollen. Einige Templates unterstützen auch Seiten-Fußzeilen.

Tipps

  • Um bestmögliche Ergebnisse zu erzielen, empfehlen wir einen kurzen und bündigen Call-to-Action. Versuchen Sie, einzelne Begriffe wie etwa „Spenden“ oder eine kurze Schlüsselaussage wie „Jetzt handeln“ zu verwenden.
  • Weitere Hilfestellungen zur Formatierung des Button-Links erhalten Sie hier: Links zu Ihrer Website hinzufügen.
  • Verwenden Sie den Style Editor, um stilistische Änderungen am Button vorzunehmen, und klicken Sie dann auf den Button, um Ihre Anpassungen in Aktion zu erleben. Die verfügbaren Style-Optionen variieren je nach Button und Template. Im Normalfall lassen sich Änderungen an Farbe, Form und Hintergrund vornehmen.
  • Wenn Sie möchten, dass Besucher einen Newsletter abonnieren, sollten Sie hierzu den Newsletter-Block verwenden. Zum Sammeln von Informationen empfiehlt sich ein Form-Block. Für Spenden sollten Sie den Spenden-Block verwenden. All diese Blocks verfügen über einen anpassbaren Button.
War dieser Beitrag hilfreich?
13 von 100 fanden dies hilfreich