Ein Vollbild als Webseitenhintergrund wird den Blick Ihres Besuchers garantiert auf sich ziehen und Eindruck hinterlassen. Doch die Auswahl des richtigen Bildausschnittes oder der richtigen Hintergrundfarbe ist gar nicht so leicht, denn das Webseiten-Design sollte perfekt auf Ihre Marketingstrategie abgestimmt werden.
Wie Sie einen Hintergrund für Ihre Webseite finden, der die Wirkung Ihres Content-Angebots optimal unterstützt, statt davon abzulenken, erfahren Sie in diesem Beitrag.
Den Webseitenhintergrund richtig in Szene setzen
Ebenso wie Werbeanzeigen oder Social-Media-Accounts ist Ihre Webseite ein Aushängeschild Ihrer Marke und sollte daher als Marketinginstrument betrachtet und genutzt werden. Genau deshalb ist auch der erste Eindruck so entscheidend, den Besucher gewinnen, sobald sie Ihre Unternehmensseite besuchen. Idealerweise löst bereits die erste Seite positive Emotionen bei Webseitenbesuchern aus und verführt sie so dazu, auf Ihrer Webseite zu verweilen und immer wieder zurückzukehren.
Ein anziehendes Hintergrundbild kann dabei helfen, starke Eindrücke zu vermitteln und den Besucher auf diesem Wege sozusagen in den Bann Ihrer Webseite zu ziehen. Das kann eine atemberaubende Fotografie, eine besondere Struktur oder auch ein kurzer Imagefilm sein.
Wichtig ist, dass der Hintergrund sichtbar ist, jedoch nicht den Rest der Seite in den Schatten stellt. Stattdessen sollte er Lust auf mehr machen und Besucher dazu animieren, sich weiter auf der Webseite aufhalten zu wollen. Achten Sie deshalb unbedingt darauf, dass das Hintergrundbild oder –video als Teil Ihrer Markenstrategie fungiert und visuell perfekt in diese eingebettet ist.
Bild: Fritz Kola
Passend zum Corporate Design nutzt die Marke Fritz-Kola einen schwarzen Hintergrund auf ihrer Webseite.
So können Sie Ihren Webseitenhintergrund erstellen
Ein Webseitenhintergrund kann auf unterschiedliche Art und Weise angepasst werden. Hosten Sie Ihre Webseite über ein Baukasten-System (wie WIX oder Jimdo) oder über die WordPress-Instanz können Sie in den Einstellungen ganz einfach ein Hintergrundbild festlegen.
Verwalten Sie Ihre Webseite hingegen selbst, müssen Sie das Hintergrundbild im CSS Ihrer Webseite hinzufügen. Klassischerweise wird dieses im <body> mit dem background-Attribut eingefügt. Sie können ein Hintergrundbild jedoch auch im <header> definieren, um ein sogenanntes Full-Screen-Landing zu erzeugen. Dabei sieht der Webseitenbesucher nach dem Aufrufen der Webseite erst einmal nur das Hintergrundbild. Erst wenn er weiterscrollt, tauchen weitere Inhalte auf. Dieser Effekt bietet sich vor allem bei spektakulären Fotografien oder Videos an, um einen Wow-Effekt zu erzeugen.
Videos können über den entsprechenden Einbettungscode von YouTube oder Vimeo eingebunden werden.
Hier finden Sie schöne Hintergrundbilder
Um einen entsprechenden Hintergrund festzulegen, müssen Sie zunächst einmal entscheiden, wie dieser aussehen soll. Dabei haben Sie die Möglichkeit, auf etwaigen Plattformen nach Hintergrundbildern zu suchen. Selbstverständlich können Sie auch eigene Fotografien oder Grafiken verwenden.
Wenn Sie jedoch keinen Fotografen haben und das Budget für ein professionelles Shooting fehlt, können Sie auf unzählige Stockfotos zurückgreifen. Die Plattformen bieten eine Stichwortsuche, um den geeigneten Hintergrund zu finden. Die folgenden Stockfoto-Galerien verfügen über eine riesige Auswahl an kostenlosen Fotografien, Grafiken und weiteren Vorlagen:
- gettyimages
- iStockphoto by gettyimages
- shutterstock
- Adobe Stock
- pixabay
Bild: Shutterstock
Wie das ideale Hintergrundbild aussieht
Ein schönes Hintergrundbild auszusuchen, kann leicht zur Herausforderung werden. Vergessen Sie deshalb nie, welches Gefühl Sie mit dem Hintergrund vermitteln wollen. Sie können dabei zwischen
- einer Fotografie oder Grafik,
- einem Video,
- einer vollflächigen Farbe,
- einem Farbverlauf oder
- einem Struktur-Muster
auswählen, um Ihre Webseite richtig in Szene zu setzen.
Entscheiden Sie sich für ein Bild, sollte der Fokus mit Bedacht ausgewählt werden. Außerdem sollte der Bildinhalt selbstverständlich zu Ihrer Marke und auch Ihrer Branche passen.
Um den Kontrast zwischen dem Vorder- und Hintergrund zu reduzieren, können Sie ein Overlay über das Bild legen. Die transparente Farbe sorgt für einen weicheren Übergang. Können Sie sich nicht für ein Bild entscheiden, haben Sie auch die Möglichkeit, einen Slider zu verwenden, der mehrere Bilder hintereinander abspielt.
Beispiel für einen Slider als Hintergrund.
Bild: V-Sun
Videos sind ebenfalls ein tolles Storytelling-Format, dass Sie in den Hintergrund Ihrer Homepage einbinden können. Achten Sie jedoch darauf, einen kurzen Abschnitt zu wählen, um nicht zu sehr von der restlichen Webseite abzulenken.
Außerdem sollten Sie in jedem Fall den Ton des Videos ausstellen. Wird der Besucher nämlich direkt beim Betreten Ihrer Webseite mit Sound beschallt, kann das als Störfaktor empfunden werden. Durch einen entsprechenden Lautsprecher-Button können Sie dies vermeiden und regeln, dass der Nutzer den Ton selbstständig einschalten kann.
Wählen Sie eine Farbe, einen Verlauf oder Texturen als Hintergrund aus, sollten Sie sich auf jeden Fall über die Wirkung der jeweiligen Farbe informieren. Während Blau sehr beruhigend und natürlich wirkt, wird Rot oft mit Dynamik assoziiert.
Größe, Auflösung und Format festlegen
Ist das richtige Hintergrundbild ausgesucht, geht es um die korrekte Darstellung. Gerade bei Fotografien und Videos kann die Auflösung und das Format die Performance der eigenen Webseite beeinträchtigen. Achten Sie deshalb unbedingt darauf, möglichst kleine Dateien zu verwenden. Im Idealfall sind die Dateien nicht größer als 600 KB.
Das gängigste Format für Hintergrundbilder liegt bei 1920 x 1080 Pixel. Aufgrund der großen Vielfalt an Geräten ist es jedoch kaum möglich, ein für alle einheitliches Format zu bestimmen. Testen Sie daher immer aus, was am besten aussieht.
Auch ob ein Bild im Hoch- oder Querformat gewählt werden soll, kann nicht pauschal beantwortet werden. Während mobile Geräte das Hochformat besser darstellen, sieht am Desktop das Querformat besser aus. Achten Sie in jedem Fall auf ein Responsive Design und testen Sie individuell, wie Ihr Bildausschnitt auf den verschiedenen Geräten wirkt.
Als Bildformat sind .png und .jpg am besten geeignet. PNG hat den Vorteil, dass es sehr detailreich darstellt und auch transparente Bereiche umfasst. JPEG hingegen lässt sich sehr gut komprimieren und ist deshalb gerade im Webbereich beliebt.
Hintergrund und Nutzungserlebnis miteinander vereinen
Verlieren Sie das Nutzungserlebnis bei der Gestaltung Ihrer Webseite nicht aus den Augen. Achten Sie stets darauf, Ihre Webseite nicht mit Design-Elementen zu überlasten und dadurch die Performance einzuschränken.
Der Hintergrund sollte deshalb idealerweise einen Mehrwert bieten und den Besucher dazu animieren, auf Ihrer Seite zu bleiben. Er sollte den Inhalt der Webseite gekonnt in Szene setzen und nicht davon ablenken. Löst der Hintergrund ein positives Gefühl aus, das der Besucher von nun an mit Ihrer Marke verknüpft, haben Sie bereits einen wirkungsvollen Effekt erzielt.
Mit dem richtigen Hintergrund auf Ihrer Webseite können Sie einen Wow-Effekt auslösen und dafür sorgen, dass Webseitenbesucher Ihre Marke mit einem bestimmten Gefühl verknüpfen. Achten Sie jedoch stets darauf, dass das Design die Nutzerfreundlichkeit Ihrer Webseite nicht einschränkt, sondern begünstigt. So werden Ihre Webseitenbesucher bestimmt auch in Zukunft gerne wieder bei Ihnen vorbeischauen.
Titelbild: Chinga_11 / Getty Images
