Hilfe Registrieren

So gibt das Hintergrundbild eurer Seite den richtigen Pep

Habt ihr schon mal überlegt, was den ersten Eindruck von eurer Website am stärksten prägt? Tatsächlich ist es nicht der Inhalt, sondern das Hintergrundbild. Es zieht sofort alle Blicke auf sich und entscheidet so maßgeblich darüber, ob jemand auf eurer Webseite bleibt oder gleich weiterzieht. Grund genug, ihm ein wenig Aufmerksamkeit zu schenken.

 

Einen Hintergrund zu gestalten, der Lust auf mehr macht, ist gar nicht schwer. Die wichtigsten Punkte und ein paar Extra-Tipps haben wir euch in diesem Artikel zusammengestellt. Schaut rein und klickt euch durch – denn wie heißt es so schön: „Für den ersten Eindruck gibt es keine zweite Chance“ ;)

 

Lesezeit: ca. 5 Minuten


Mit Gefühl: Eine Verbindung zum Besucher aufbauen

Bevor wir uns wie versprochen dem Hintergrund zuwenden, machen wir einen kurzen Ausflug in die Welt der Werbung: Der Social-Media-Vermarkter Unruly hat ein Ranking der meistgeteilten Werbespots 2016 erstellt, das uns nützlich sein kann. Warum? Es verdeutlicht, dass alle erfolgreichen Clips etwas gemeinsam haben: Sie wecken Emotionen. Im Marketing wird dieser Schachzug gern genutzt, um Kunden anzuziehen. Und euch kann er dabei helfen, das optimale Hintergrundbild für eure Website zu finden.

 

Bestimmt fällt euch ein Motiv ein, das mit eurem Angebot oder Blog in Verbindung steht und beim Besucher ein gutes Gefühl auslöst oder eine emotionale Verbindung zu eurer Marke herstellt. Ein Beispiel: Wenn ihr einen Reiseblog erstellen möchtet, wählt ein Bild von einem wunderbaren Ort, den ihr besucht habt – wahrscheinlich wird der Besucher sofort die Koffer packen wollen. Auch ein Bild, das eine Bewegung zeigt oder eine spannende Perspektive einnimmt, kann aus einem simplen Hintergrund etwas Besonderes machen.

 

Das Hintergrundbild bietet die Möglichkeit, euer Produkt, eurer Geschäft oder euch selbst im besten Licht zu präsentieren. Und keine Panik, wenn ihr euch nicht entscheiden könnt: Mit der Option Wechselbild könnt ihr bis zu 25 Bilder einbinden, die nacheinander in Dauerschleife gezeigt werden.

Macht was her: Das Hintergrundbild dieses Reiseblogs vermittelt direkt Urlaubsstimmung.
Macht was her: Das Hintergrundbild dieses Reiseblogs vermittelt direkt Urlaubsstimmung.

Hochwertige Bilder: runterladen oder einfach selber machen

Hochauflösende Bilder lassen eure Website glänzen. Ihr braucht aber kein Profi-Fotograf zu sein, um ein tolles Hintergrundbild für eure Website zu bekommen. Denn: Zum Glück gibt es viele Stockfoto-Dienste, die kostenlos qualitativ hochwertige Bilder anbieten.

 

Wer lieber ein Foto seines eigenen Produkts als Hintergrundbild einbinden möchte, aber kein Budget für einen Fotografen hat, kann mit unser Anleitung kinderleicht selbst eine professionelle Fotobox bauen. Da sieht man, dass kleine Kniffe einen großen Unterschied machen können.

 

In beiden Fällen gilt: Jedes Bild hat ein ideales Format. Falls ihr euch nicht sicher seid, ob sich in eurem Fall ein JPG oder ein PNG besser eignet, könnt ihr es hier herausfinden.

Profi-Tipp: Euer gewünschtes Hintergrundbild ist zu groß geraten? Mit den kostenlosen Tools TinyPNG und TinyJPG könnt ihr es ohne sichtbaren Qualitätsverlust komprimieren.

Auf die Größe kommt es an: Die richtige Auflösung wählen

Kommen wir nun zu einer weiteren simplen Maßnahme, die oft vernachlässigt wird: die passende Größe für das Hintergrundbild festzulegen. Das ist super wichtig, um eurer Seite ein professionelles Erscheinungsbild zu geben.

 

Am besten schneidet ihr das Bild zunächst so zu, dass nichts mehr darauf zu sehen ist, was von eurem Produkt, der Person oder dem Reiseziel ablenkt. Damit richtet ihr das Augenmerk des Betrachters nur auf das, worauf es euch ankommt. In den meisten Fällen sind Landschaftsbilder besser für den Hintergrund geeignet als Porträts.

 

Die geringste Auflösung liegt bei den meisten Monitoren bei 1024x768 Pixeln. Wir empfehlen euch deshalb ein Hintergrundbild mit um die 2000 Pixeln, damit seid ihr auf der sicheren Seite. Hat das Bild eine zu geringe Auflösung, sieht es schnell verpixelt oder verschwommen aus.

Hochwertige Portraits vermitteln die "menschliche Seite" einer Marke oder eures Projekts.
Hochwertige Portraits vermitteln die "menschliche Seite" einer Marke oder eures Projekts.

Wichtig ist es jetzt noch, den Hintergrund bei den meistgenutzten Browsern wie Google Chrome und Firefox sowie auf allen mobilen Geräten zu checken – so geht ihr sicher, dass er überall richtig angezeigt wird.

 

Profi-Tipp: Ihr seid euch nicht sicher, wie viele Pixel euer Bild hat? Beim PC könnt ihr das ganz einfach herausfinden, indem ihr mit der rechten Maustaste auf den Dateinamen klickt und dann auf „Eigenschaften“ und den Reiter „Zusammenfassung“[CM1] geht. Beim Mac funktioniert es mit einem Rechtsklick auf die Datei und den Optionen „Informationen“ und „Weitere Informationen“.

Der Blick aufs Wesentliche: Den Fokuspunkt bestimmen

Der Fokus eures Hintergrundbildes ist wichtig, um die Aufmerksamkeit des Betrachters genau dorthin zu lenken, wo ihr sie haben möchtet. Das kann euer Produkt, aber auch ein anderes interessantes Detail sein. Dafür bietet euch Jimdo die ideale Funktion: Mit dem Fokuspunkt richtet ihr das Bild im Hintergrund ideal nach euren Wünsche aus – und so, dass nichts Wichtiges vom Text oder der Navigation verdeckt wird.

 

Um den Fokuspunkt zu verschieben, klickt ihr im Menü auf Design und wählt Hintergrund. Hier wählt ihr ein Bild aus und seht einen weißen Kreis, der den Fokuspunkt kennzeichnet. Indem ihr ihn verschiebt, lenkt ihr den Blick des Betrachters auf die gewünschte Stelle im Bild. Das funktioniert bei allen Bildern und auch bei Wechselbildern – ganz ohne Photoshop oder andere Extra-Tools.

 

Übrigens: Kürzlich haben wir die Buttons „pausieren“ und „fortsetzen“ bei den Wechselbildern hinzugefügt. Damit könnt ihr nun den Fokus bei jedem einzelnen Bild verschieben, das Ergebnis in der Vorschau ansehen und es speichern, wenn es euch gefällt.

Mit dem Fokuspunkt bestimmt ihr die Ausrichtung eures Hintergrundbilds.
Mit dem Fokuspunkt bestimmt ihr die Ausrichtung eures Hintergrundbilds.

Immer in Bewegung: Video als Hintergrund

Eine kleine Warnung vorweg: Ein Video als Hintergrund kann zwar eindrucksvoll sein, birgt aber auch die Gefahr, von der Website abzulenken. Probiert es einfach einmal aus. Ratsam sind zum Beispiel Videos, die nicht zu viel Bewegung enthalten, so wie in diesem Beispiel.

Um eurer Webseite ein Video hinzuzufügen, sucht ihr euch einfach eines auf YouTube oder Vimeo aus. Oder ihr nehmt einen lizenzfreien Clip von Seiten wie Pond5 oder AllTheFreeStock.

 

Die Designs Stockholm und San Francisco eignen sich übrigens besonders gut, um den Effekt eines Videos im Hintergrunds voll auszukosten. Beim Design Stockholm ist das Hintergrundbild auf der Startseite als Vollbild zu sehen und auf den Unterseiten in der Kopfzeile, sodass es die Inhalte nicht „erschlägt“.

 

Profi-Tipp: Haltet euer Video möglichst kurz. Jimdo zeigt es automatisch in Dauerschleife, sodass es nicht plötzlich vorbei ist.

Klare Sache: Wann eine einheitliche Hintergrundfarbe empfehlenswert ist

Für alle, die mit Fotografie oder Videos nicht so viel am Hut haben, gibt es aber auch noch etliche andere Möglichkeiten, den Hintergrund zu gestalten. Probiert es doch mal mit einer plakativen, einheitlichen Farbfläche, auf der ihr ein originelles Statement platziert.

Checkt aber vorab, ob die ausgewählte Farbe zu eurer Branche passt und den Eindruck vermittelt, den ihr euch für euer Angebot wünscht.

Die Agentur unger music nutzt ein knalliges Orange, das ihrem Auftritt etwas Frisches und gleichzeitig Seriöses gibt.
Die Agentur unger music nutzt ein knalliges Orange, das ihrem Auftritt etwas Frisches und gleichzeitig Seriöses gibt.

Der Hintergrund kann aber auch die Sichtbarkeit des Textes beeinflussen. Wenn ihr möchtet, dass der Besucher sich wirklich auf die Inhalte konzentriert, funktioniert ein schlichter weißer Hintergrund am besten und gibt einen eleganten Look – super z. B. für Unternehmen, die einen seriösen Auftritt erzeugen möchten.

 

Profi-Tipp: Ihr habt Lust, was Rustikaleres auszuprobieren? Dann experimentiert doch mal mit einem strukturierten Hintergrund wie zum Beispiel Holz oder Ziegelsteinen herum.

 

Ihr seht: Die Wirkung eines eindrucksvollen Hintergrunds ist nicht zu unterschätzen. Am besten probiert ihr ein wenig herum und tastet euch so an genau den Hintergrund heran, der optimal zu euch und eurem Projekt passt. Es lohnt sich kreativ zu werden – eure Besucher werden es euch danken!


Diesen Artikel mit anderen teilen:


Habt ihr einen tollen Hintergrund, den ihr mit uns teilen möchtet? Dann verlinkt eure Seite in den Kommentaren – wir sind gespannt!

Viele Grüße
Tara

Tara Santiago

Redakteurin bei Jimdo

Ähnliche Artikel:

So gibt das Hintergrundbild eurer Seite den richtigen Pep
>> mehr lesen

Visual Marketing: Wie ihr die Kraft von Bildern nutzt
>> mehr lesen

Das kleine Webseiten-Glossar: wichtige Web-Begriffe verständlich erklärt
>> mehr lesen

Eure Highlights: Die meistgelesenen Blogartikel 2016
>> mehr lesen


Kommentar schreiben

Kommentare: 31
  • #1

    Xhelil (Mittwoch, 12 April 2017 17:34)

    Supertipp mit dem Panorama-Foto und dem Focus. Ich habe auf meiner Maler-Homepage aber gegen alle Regeln verstossen und habe meinen Hintergrund vergipst und angestrichen.

  • #2

    Verena (Mittwoch, 12 April 2017 18:23)

    Hi, danke für die Tipps. Aber auf den verlinkten Seiten habe ich keine 2000px Bilder gefunden...

  • #3

    Tester (Mittwoch, 12 April 2017 21:43)

    Ehrliche Meinung:
    Wenn die Startseite vor allem aus einem großen Hintergrundbild besteht dann freut sich Google bestimmt - weil so eine Seite braucht man nicht ins Ranking nehmen - und ich als Besucher bin weg, wenn ich nicht relativ schnell sehe, was es noch für Informationen gibt.
    Einzige Ausnahme, wenn erkennbar ist, dass es um Fotos geht, also Fotografenseiten usw.
    Richtige, gute Header wie früher bei Jimdo sind besser, weil man dann immer noch ausreichend Text sieht sobald man eine seite besucht. Der Trend großes Bild wird schnell wieder vorbei sein.

  • #4

    Christoph Hentschel (Donnerstag, 13 April 2017 05:52)

    Schaut, den Hintergrund finde ich besonders schön. Ich habe welche für jede Seite ausgewählt.
    Hier noch ein Beispiel: https://www.100seconds.de/wanderschuh/

  • #5

    sanne (Donnerstag, 13 April 2017 09:12)

    ich habe mich fürs klassische schwarz/weiß entschieden und mein Hintergrund ist schön hölzern ;-) schöne Ostern Allen!

  • #6

    Ulrich (Donnerstag, 13 April 2017 09:37)

    Vielen Dank für die Tipps.

  • #7

    Tester (Donnerstag, 13 April 2017 10:07)

    Hallo Christoph
    schöne Seiten, allerdings dauert es bei mir und ich habe Glasfaser direkt 5o MBit rund 5 Sekunden bis ein Hintergrundbild angezeigt wird. DAS ist extrem langsam. Wie gross sind deine Bilder für den Hintergrund?

  • #8

    Fotolinse-paashaus (Donnerstag, 13 April 2017 12:05)

    Klasse Tipp,
    wir haben unsere Konzert- Fotografen Seite kürzlich auf Design Stockholm umgestellt.

    Wir sind mit unserem Hintergrundbildern, auch durch eure Tipp's recht gut dabei.
    Nur zu viele die im Wechselbild laufen, dürften doch ziemlich ablenken, denkt bitte daran.
    Allen ein fröhliches Osterfest
    Die Rock & Blues Fotografen

  • #9

    Petra (Donnerstag, 13 April 2017 12:06)

    Super Tipps, vielen Dank! Lese immer super gerne euren Blog! �

  • #10

    Residenz Meeresbrandung (Donnerstag, 13 April 2017 16:29)

    Moin Moin,
    ich arbeite auch mit einer Landschaft als Hintergrundbild. Das kommt bei unseren Gästen sehr gur an. Allerdings arbeite ich immer noch mit einem alten Design. Ich kann mich nicht für die neuen Vorlagen begeistern, da meine Kunden immer eine einfache Menüführung bevorzugen.

  • #11

    BLUESBEA (Donnerstag, 13 April 2017 19:07)

    Mir ist der Aufbau einer Art persönlichen Beziehung zum Betrachter auf allen Hauptseiten wichtig.
    Ein gutes Foto kann meiner Meinung nach auch ruhig verpixelt oder unscharf sein.
    Entscheidend ist, dass der Betrachter auf dem Foto verweilt und mit diesem verschmilzt.

  • #12

    2Twinz Bean Bags (Freitag, 14 April 2017 03:44)

    Danke für die super Beiträge Tara und Tester,
    für uns 2Twinz war es wichtig, dass es einen großen, durchgezogenen Header gibt und der Kunde trotzdem den Anfang der Schrift sieht - um erstmal beim Foto / Video hängen zu bleiben und dann weiter zu scrollen. Da unser Logo schwarz/weiß ist, ist so auch unsere Seite gestaltet - so fokussiert sich der Kunde hauptsächlich auf die Produkte (in Farbe). Hoffen wir :D

    Über Feedback sind wir jederzeit dankbar! (Seite noch nicht fertig).

  • #13

    Max (Freitag, 14 April 2017 13:57)

    Was für ein Jimdo-Style sind die beiden hier gezeigten Website mit dem grossen Bild? Danke.

  • #14

    Daniel Maurhofer (Freitag, 14 April 2017 15:18)

    Vielen Dank für die tollen Tipps.
    Ich habs einmal mit einem bewegten Hintergrund versucht.
    www.ankermedia.ch

  • #15

    evi.fm (Sonntag, 16 April 2017 12:55)

    Ich hoffe wir haben alles richtig gemacht!
    Schaut sie euch doch mal an!
    https://evi-fm.jimdo.com/

  • #16

    F. Niessen (Sonntag, 16 April 2017 20:21)

    Hallo Jimdo. Das Ranking der besten Spots 2016 finde ich super. So hat man die Möglichkeit, sich schnell einen Überblick zu verschaffen. Mehr davon... Danke.

  • #17

    Alster (Montag, 17 April 2017 07:44)

    Vielen Dank für diesen Tollen Beitrag, ich hatte immer das Problem die richtigen Bilder einzusetzen.

  • #18

    Reinhard (Dienstag, 18 April 2017 22:47)

    wieder ein guter Eintrag von euch. Das Hintergrundbild werde ich auf ihren Artikel hin auf die Auflösung hin prüfen. Möglich, dass ich hier nachbessern muss.
    Vielen Dank.

  • #19

    Gerald (Mittwoch, 19 April 2017 23:42)

    Danke!
    www.der-edelstein.at

  • #20

    Rossi (Donnerstag, 20 April 2017 07:40)

    Das zeigt aber auch, dass Webseiten immer mehr auf Visuelles setzen und der Content erst an Position zwei kommt. Mal gucken, wie lange das so bleibt...

  • #21

    Sabine (Donnerstag, 20 April 2017 08:37)

    Moin Moin
    wenn ich ein Video aus youtube oder vimeo verlinke, wie sieht es mit den Urheberrchtsangaben an? Und wenn ich einen lizenzfreien Clip von Seiten wie Pond5, AllTheFreeStock oder Fotolia herunterlade, kann ich diese doch nicht einfach auf youtube oder vimeo hochladen und sie dann in jimdo verknüpfen. Das würde doch das Urheberrecht verletzen? Wie genau muss man denn da vorgehen? Danke für einen Tipp!

    Liebe Grüsse Sabine

  • #22

    TOM (Donnerstag, 20 April 2017 15:54)

    ...Emotionen wecken....ganz schön schwer, aber sicherlich völlig richtig!

  • #23

    Beat Wächter (Donnerstag, 20 April 2017 19:47)

    Für mich fehlt eine art "random" funktion. Aktuell ist die bildabfolge immer gleich. Insbesondere das erste bild (bei besuch der seite) sollte immer ein anderes sein. Dies würde auch unsere page noch spannender machen. Habe dies bereits einmal angemerkt via mail an einen jimdo-kontakt. Vielleicht ist ja bald noch möglich....liebe grüsse aus der schweiz.

  • #24

    Räumer (Samstag, 22 April 2017 07:44)

    Kann man mir sagen oder eine Gute Seite empfehlen wo Hintergrundbilder bekommt. Am liebsten Kostenlos und für Kommerzielle Zwecke.

  • #25

    Alexandra (Montag, 24 April 2017 10:17)

    Ich habe eine Mischung aus einarbig, Motiv und Farbverlauf gewählt, ist nun schon etwas betagt. Leider klappt der Focus auf mobilen Geräten damit nicht.
    LG Alexandra

  • #26

    Christel (Mittwoch, 26 April 2017 11:58)

    Für mich ist wichtig, dass eine Verbindung entsteht, wenn man die gesamte Seite betrachtet, dazu gehören für mich auch Bilder. Damit kann man mehr Atmosphäre transportieren als mit vielen ´Worten. Natürlich darf der Text nicht zu kurz kommen, ich suche auch nicht gerne nach Informationen. Gleichzeitig möchte ich einen Eindruck erhalten, wie der Seitenbetreiber so tickt und dafür sind Bilder eben auch sehr geeignet.
    Viele Grüße
    Christel

  • #27

    Michael Bayer (Donnerstag, 27 April 2017 21:31)

    Vielen Dank für die Tipps!
    Da sind interssante Sachen dabei!
    Gruss Michael

  • #28

    Jürgen (Freitag, 28 April 2017 07:34)

    Vielen Dank für diese schöne Nachrichten. Ich bin ehrlich und habe meine Webseite etwas vernachlässigt. Bin jetzt aber wieder dran mit diesem neuen Funktionen macht es noch mehr Freude.

    Herzliche Grüße

    Jürgen

  • #29

    HP Envy x360 M6-AQ003DX Digitizer Assembly (Freitag, 28 April 2017 11:25)

    Ich bin ehrlich und habe meine Webseite

  • #30

    Stefan (Freitag, 28 April 2017 16:37)

    Danke für die tollen Tipps, die ihr immer habt.

    https://www.heimatklaenge-giesel.de/

    Beste Grüße
    Stefan

  • #31

    Manuel (Freitag, 28 April 2017 22:14)

    Hallo,
    danke für die wertvollen Ideen!
    Hintergrundbilder bringen sehr viel Frische auf eine Homepage!
    Viele Grüße
    Manuel
    www.ammeldingen.de