Erziele einen visuellen Eindruck, indem du ein Bild hinter dem Inhalt deiner Website einfügst.
Bei einigen Websites der Version 7.0 kannst du ein Hintergrundbild hinzufügen, das hinter dem Website-Inhalt angezeigt wird. So entsteht ein visuelles Element, das zur gewünschten Stimmung für deine Website beiträgt.
In diesen Template-Familien kannst du Hintergrundbilder für die gesamte Website hinzufügen:
- Adirondack
- Avenue
- Aviator – Die Info-Seite unterstützt auch ein seitenspezifisches Hintergrundbild
- Five
- Forte
- Momentum
- Montauk
- Native
Sämtliche Hintergrundbilder lassen sich randlos darstellen, sodass sie die jeweilige Seite im Browser bis zum Rand ausfüllen. Wenn dein Template keine seitenübergreifenden Hintergrundbilder unterstützt, findest du hier nähere Informationen zum Erstellen von seitenspezifischen Hintergrundbildern.
Version 7.1 unterstützt keine Hintergrundbilder für die gesamte Website. Du kannst jedoch Hintergrundbilder hinzufügen, die hinter dem Inhalt deiner Website in den meisten Seitenabschnitten angezeigt werden.
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:
- Wir empfehlen, Bilder mit einer Breite von 1500 Pixeln bis 2500 Pixeln hochzuladen. Wenn Probleme beim Laden auftreten, z. B. wenn Hintergrundbilder nicht auf Mobilgeräten geladen werden, reduziere die längste Seite aller Bilder auf 1500 Pixel. Dies erhöht die Ladegeschwindigkeit und hat kaum Auswirkungen auf die Bildqualität.
- Randlose Hintergrundbilder werden auf Mobilgeräten häufig anders zugeschnitten als auf Computern. Du kannst ein Hintergrundbild auswählen, das auf verschiedene Arten zugeschnitten werden kann.
- Abstrakte Muster, Bilder ohne Text oder Rand und wiederholte Muster eignen sich im Allgemeinen besser, da sie flexibler zugeschnitten werden können, was zu einem gewissen Grad fast immer erforderlich ist.
- Hintergrundbilder werden nicht übertragen, wenn du das Template wechselst.
Das Bild hinzufügen
So fügen Sie einen Hintergrund für die gesamte Website hinzu:
- Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stile.
- Suche nach einer Anpassung namens Hintergrundbild, Website-Hintergrundbild oder Seiten-Hintergrundbild. Klicke dann auf die Anpassung, um sie zu öffnen.
- Um eine Datei von deinem Computer hinzuzufügen, klicke auf den Uploader oder ziehe dein Bild in den Uploader. Klicke auf Nach Bild suchen, um ein Bild wiederzuverwenden oder ein Agenturbild hinzuzufügen.
- Gestalte das Bild und klicke dann auf Speichern, um die Änderungen zu veröffentlichen.
In Adirondack sieht die Anpassung folgendermaßen aus:
Das Bild gestalten und zuschneiden
Nach dem Hinzufügen des Hintergrundbilds kannst du die unterhalb des Bild-Uploaders aufgeführten Optionen verwenden, um das Bild zu bearbeiten und unerwünschte Zuschnitte oder Verzerrungen beheben.
| Size (Größe) |
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:
|
| Repeat (Wiederholen) |
Vergewissern Sie sich, dass Größe auf Auto oder Eingrenzen eingestellt ist.
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
Denk daran:
- Es empfiehlt sich, die Hintergrundfarben teilweise deckend einzustellen, sodass das Hintergrundbild durchscheint.
- Eine Hintergrund- oder Overlay-Farbe kann angezeigt werden, während ein Hintergrundbild geladen wird.
Schauen Sie sich an, wie Ihre Website auf Mobilgeräten aussieht
Auf Computern und mobilen Geräten wird das gleiche Hintergrundbild angezeigt. Um dir einen Überblick über deine Änderungen zu verschaffen, solltest du dein Smartphone immer griffbereit haben und die Website-Ansicht darauf aktualisieren, wenn du die gewünschten Änderungen auf einem Computer gespeichert hast. Über die Geräteansicht erhältst du eine schnelle Vorschau beim Bearbeiten auf einem Computer.
Wenn sich das Bild an den längeren, schmaleren Browserbildschirm eines mobilen Geräts anpasst, kann es zum Zuschneiden oder zu Verzerrungen kommen. Es gibt ein paar Dinge, die du tun kannst, um das Zuschneiden zu minimieren:
- 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 erfährst du Näheres über Stil-Einstellungen, 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 Blog-Seiten oder Events-Seiten 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, öffne die Anpassung „Hintergrundbild“ (siehe Schritt 3 oben) und probiere eine oder beide der folgenden Möglichkeiten aus:
- Fixposition prüfen (dies hat keine Auswirkungen auf einige Mobilgeräte, einschließlich iOS)
- Wähle Größe: Eingrenzen oder Größe: Automatisch
Du kannst auch mit den Positionierungsoptionen experimentieren, um festzustellen, 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 randlosen Bildern 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 dein Hintergrundbild breiter als 2500 Pixel ist, kann dies zu Problemen für deine Besucher führen.
Hintergrundbilder und benutzerdefinierter Code
Benutzerdefinierter Code, den du zu deiner Website hinzugefügt hast, kann die Darstellung deines Hintergrundbildes beeinträchtigen. Deaktiviere beim Beheben von Probleme mit deinem Hintergrundbild vorübergehend jeglichen benutzerdefinierten Code, um festzustellen, ob die Probleme damit zusammenhängen. Weitere Informationen findest du unter Benutzerdefinierten Code zu deiner Website hinzufügen.
Darstellung auf Mobilgeräten
Hier erfährst du, wie du Stil-Anpassungen zur Behebung von häufig auftretenden Problemen mit der Anzeige auf Mobilgeräten verwenden kannst. Da es keine separaten Anpassungen für Mobilgeräte und Computer gibt, solltest du mit diesen Optionen herumexperimentieren. So findest du 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 deines Hauptinhalts verdeckt möglicherweise das Hintergrundbild. Passe die Transparenz an, um das Hintergrundbild korrekt darzustellen. (Dies wirkt sich auch auf die Ansicht auf dem Computer aus.) Stelle sicher, dass die längste Kante deines Originalbilds kürzer als 2500 Pixel ist, da größere Bilder möglicherweise nicht dargestellt werden können. In der Aviator-Familie musst du 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
Experimentiere mit den Optionen in der Anpassung „Hintergrundbild“, um die perfekte Anordnung für dein Hintergrundbild zu finden. Nachfolgend findest du einige Beispiele, die dir als Inspiration dienen sollen.
Hier siehst du ein Beispiel mit dem Template „Montauk“:
- Size: Cover (Größe: Abdecken)
- Fixed position (Feste Position)
- Die Leinwand-Hintergrund-Farbe ist auf „halbtransparent“ eingestellt.
Hier siehst du ein Beispiel mit dem Forte-Template:
- Size: Auto (Größe: Auto)
- Repeat: Repeat (Wiederholen: Wiederholen)
Hier siehst du ein Beispiel mit dem Native-Template:
- Position: Top Left (Position: oben links)
- Size: Auto (Größe: Auto), Repeat-Y (Wiederholen-Y)
- Website-Hintergrundfarbe: Blau
Und hier siehst du das Aviator-Template mit einem Hintergrund, der für die gesamte Website gilt, und einem weiteren, der spezifisch für die Info-Seite gilt:
Seitenspezifische Hintergrundbilder hinzufügen
Sie haben mehrere Möglichkeiten, ein Hintergrundbild auf einer bestimmen Seite zu erstellen.
- 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-Familie kannst du beispielsweise mithilfe von Blöcken in einem Intro-Bereich Inhalte verschiedenster Art in deinem Banner hinzufügen.
- Cover-Seiten - Cover-Seiten sind in sämtlichen Templates von Version 7.0 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.
- Abschnitt „Index-Seite“ – Du kannst in den Template-Gruppen Brine und Pacific einen Index verwenden, um ein Hintergrundbild hinter dem Layout-Seitenabschnitt hinzuzufügen.