Große Hintergründe: 9 Beispiele und viele Tipps
Große Hintergrundbilder sieht man immer öfter und das ist doch ein Grund, sich mit dem Thema ein wenig genauer auseinanderzusetzen. Die heutigen Bandbreiten ermöglichen es, tolles Bildmaterial in Webseiten zu integrieren und wir als Webdesigner können davon Gebrauch machen.
Allerdings gibt es dabei einiges zu beachten und man sollte nicht allzu leichtfertig mit den neuen Möglichkeiten umgehen. Deswegen gibt es in diesem Beitrag Tipps zu dem Thema, die ich euch an Beispielen veranschauliche.
Kommentare würden mich natürlich sehr freuen. Viel spaß mit dem Beitrag.
Beispiele
ANidea
Red Rock
ecoki
Hoddows Gastwerk
Kosciuszko Alpine Guided Walks
Hills & Dales Estate
FA Design
Tipps
Die oben gezeigten Beispiele gehen teilweise mit ihren Hintergründen komplett verschieden um und daran kann man auch die Probleme erkennen, die einem bei der Arbeit mit großen Hintergrundbildern im Weg stehen.
Abschneiden oder skalieren?
Die Hintergrundbilder dürfen natürlich gewisse Dimensionen nicht überschreiten, damit man den Besuchern die Ladezeit noch zumuten kann. Irgendwann ist jedes Hintergrundbild zu Ende und hat dann hässliche harte Rändern.
Man kann an dieses Problem auf verschiedene Weise herangehen. Entweder man lässt das Hintergrundbild automatisch auf die Größe des Monitors des Betrachters vergrößern oder verkleinern (http://www.hillsanddales.org/) oder man nimmt das Radiergummi Werkzeug in Photoshop und macht die harten Rändern etwas angenehmer (http://anidea.com/).
Ich empfehle die zweite Möglichkeit. Lässt man das Hintergrundbild automatisch vergrößern oder verkleinern, sieht das häufig ziemlich furchtbar aus. Denn wenn die eigentliche Breite und Höhe des Bildes überschritten ist, wird daraus ein Pixel Salat. Dann nehme ich lieber ein Hintergrundbild mit 1920px Breite und radiere die Ränder weg.
Lenken die Bilder ab?
Bei Webseiten mit wenig Inhalt ist das nicht so das Problem, aber beispielsweise bei Blogs sollte man sich fragen, ob ein großes Hintergrundbild nicht zu sehr ablenkt. Meiner Ansicht nach ist das ein sehr wichtiger Punkt. Wenn das Hintergrundbild schlecht gewählt wurde, kann man sich schwerer auf den Inhalt konzentrieren.
Wie wählt man also das beste Bild oder wie sorgt man dafür, dass die Bilder weniger ablenken?
- Oben spielt die Musik – http://anidea.com/ Ist ein gutes Beispiel dafür, wie es funktionieren kann. Wenn man das Bild hauptsächlich auf den oberen Bereich konzentriert und es nach unten hin ausradiert, hat man bei wesentlichen Teil des Fließtextes wieder einen weißen und überhaupt nicht störenden Hintergrund
- Geringer Farbumfang – Das Bild sollte nicht zu viele Farben enthalten. Sonst wird es zu unruhig und zieht die Blicke geradezu an.
- Weichzeichner – Oben seht ihr recht häufig, dass ein Weichzeichner verwendet wurde, um das Bild unkenntlich und unauffälliger zu machen. Die scharfen Kanten des Contentbereichs drängt sich dann deutlicher in den Vordergrund und die Hintergrundbilder stören weniger.
- Geringer Kontrast – Und damit meine ich nicht nur die Farbe. Bei http://www.hoddows-gastwerk.de/ kann man das Bild gar nicht übersehen. Und wäre es ein Blog, würde ich von diesem Bild abraten. Die Farbigkeit des Bildes sticht stark ins Auge. Vor allem, da der Rest der Seite schlicht schwarz ist. Zudem ist es im zentralen Punkt der Komposition.
Was man nicht machen sollte
- Zu viel des Guten – Ich könnte http://anidea.com/ in den Himmel loben, wenn nicht bei jedem Seitenaufruf ein neues Bild laden würde. Das stört extrem, da der Seitenaufbau so stark verlangsamt wird und sich die Seite ständig verändert. Eigentlich soll man dort lesen, aber die immer neuen, und wirklich guten, Hintergründe machen das nicht einfacher.
- background-attachment:fixed; - Benutzt das bitte nur, wenn ihr euch sicher seid, dass das Bild nicht zu sehr nervt. ANidea hat das schon richtig erkannt und darauf verzichtet.
- Slideshow im Hintergrund – Letztens ist mir eine Seite begegnet, die im Hintergrund eine Flash Slideshow abgespielt hat. Das ist ein absolutes No-Go und lenkt einfach nur von allem anderen ab.
- Zu viel Transparenz – Es ist sehr verlockend ein wenig mit der Transparenz zu spielen und das Bild durchscheinen zu lassen. Das kann auch wirklich gut aussehen, allerdings macht man es dem Leser dadurch nicht einfacher. Bei wenig Text ist das in Ordnung, aber ein unruhiger Texthintergrund stört irgendwann einfach nur noch.
Wichtig: Bedenkt euren mobilen Nutzer
Habt ihr eine Seite, die Nutzer bindet und auch mit iPhones und ähnlichen mobilen Endgeräten besucht wird, schaltet das Hintergrundbild für diese ab! Das vergessen sehr viele Webdesigner und man kann keine viel größeren Fehler machen. Es kostet eine Menge Ladezeit und der iPhone Besitzer wird euch nicht dafür danken, dass ihr seinen kostbaren Traffic für ein Hintergrundbild verschwendet, dass er auf Grund der Auflösung meistens eh nicht sehen kann.
Optimiert die Bilder
Auch wenn hohe Bandbreiten Standard sind, solltet ihr die Bilder so gut wie möglich optimieren. Diese Sammlung von 8 Tools für die Bildoptimierung könnte hilfreich sein. Beim Smashing Magazine findet ihr außerdem clevere Optimierungstricks für jpg und png Dateien.
Für Fortgeschrittene
Mal wieder der Kulturbanause 
Hier ist der Hintergrund nicht nur ein Hintergrund sondern geht auch in Vordergrund über. Die Seite selber ist in die Landschaft integriert und das ist natürlich noch etwas besser, als einfach nur ein Bild in den Hintergrund zu packen. Gleichzeitig steigt aber auch der Schwierigkeitsgrad stark an und man sollte sich seiner Sache wirklich sicher sein. Lieber darauf verzichten als am ende eine halbgare Lösung präsentieren.
Es müssen nicht immer zwei Hintergründe sein
Die meisten Seiten benutzen zwei Hintergründe: Einmal das große Bild und dann noch einen Hintergrund, meist weiß, für den Text. Das muss nicht sein. Wenn man einen Hintergrund hat, der Farbflächen bietet, kann man den Text auch direkt darauf platzieren.
Gleichzeitig wurde hier der Hintergrund noch animiert. Bin ich kein Fan von. Mir erschließt sich nicht, warum man die Aufmerksamkeit auf das Schiff lenken sollte und das very new steht so oder so schon im Vordergrund. Wenn eine Animation aber wirklich sinnvoll ist, kann man das machen.
Ralf
21. Oktober 2009 um 13:08 UhrFinde den Bericht wirklich sehr klasse. Habe mich auch schon häufig mit den großen Hintergründen beschäftigt. Sehr tolle Anregungen von dir. Habe mir zwar noch nicht alle angesehen, aber da deine Berichte hier länger stehen, werde ich sicher noch öfter danach schauen.
Der Kulturbanause gefällt mir. Was ich besonders toll finde, daß man rechts auch noch den Style “switchen” kann! Eine tolle Arbeit. Du hast Recht: man muss sich sicher sein!
Was ich noch erwähnen muss: Das Bäderland Hamburg hat seit diesem Jahr auch ein super Design, wie ich finde. Auch der Rand dieser Seite ist sehr gelungen für die verschiedenen Auflösungen abgestimmt. Einfach mal schauen unter www.baederland.de
So long. Gruß Ralf
Chris
21. Oktober 2009 um 13:21 UhrSchöner Beitrag, jetzt fehlt nur noch ein How-To oder eine dementsprechende Linksammlung
Manu
21. Oktober 2009 um 15:42 UhrMag diese übertrieben großen Hintergrundbilder kann ich mich ehrlich gesagt garnicht einlassen! Das letzte Beispiel ist mir da noch am liebsten, da das Bild mit der Farbe verschmelzt und dadurch meine Ladekapazitäten und auch Augen schont.
Mit dem background-attachment:fixed; bin ich mit Dir nicht im Einklang: Wenn mir größere Hintergrundbilder auf Webseiten einzusetzen in den Sinn kommt, nehmen diese bei mir generell eine fixe Haltung ein. Das ist einfach deshalb so, da ich bemerkt habe, dass das Scrollverhalten auf älteren PC’s dadurch stark beeinträchtigt wird und somit ein ruckliges Feeling aufkommt.
wario von digital-workshop.at
21. Oktober 2009 um 23:27 UhrVor allem den Trick von Smashing Magazins um png´s zu optimieren und dadurch ohne Qualitätsverlust zu verkleinern solle man sich unbedingt ansehen. Ich nutze bei jeder neuen Webseite diesen Trick und schrumpfe damit die Bildergröße fast um die Hälfte.
Stephan
22. Oktober 2009 um 10:21 UhrHast Du vielleicht auch einen Link zu diesem Trick?
Danke im voraus – Gruß Stephan
Stephan
22. Oktober 2009 um 10:25 UhrUps … sorry. Ich hätte erst den ganzen Text zu ende lesen sollen. Am Ende stehen ja die Links. Entschuldigung.
Gruß Stephan
Florian
22. Oktober 2009 um 06:08 UhrHallo,
also ich bin ausgesprochener Fan von diesen großen Hintergrundbildern, gern gefixt und zufällig wechselnd
Schöne Beispiele hast Du da angebracht, von Deinen Tipps werde ich mir mal ein paar vornehmen.
Lars
23. Oktober 2009 um 18:06 UhrHallo ich habe da auch noch ein Beispiel http://www.biberbaeckerei.ch/
Tobbi
23. Oktober 2009 um 19:07 UhrInteressanter Artikel. Manche der oben gezeigten Hintergrundbilder empfinde ich persönlich doch als störend.
Andererseits sehe ich es auch so, dass ein hübscher, dezenter Hintergrund die Webseite/Blog durchaus aufwerten kann.
torsten
24. Oktober 2009 um 09:02 UhrIch mag grosse Hintergründe eigentlich gerne. Eigentlich, denn die Umsetzung bzw. Integration ist nicht ganz einfach. Bei diesen Beispielen gefällt mir die Seite von “ecoki” sehr gut. Da passt alles zusammen. Bei den anderen Beispielen finde ich den Einsatz der großen Bilder nicht so gelungen.
Ben
28. Oktober 2009 um 23:16 Uhrwww.Schlossanger.de
Lennart Prange
30. Oktober 2009 um 16:49 UhrHatte ich auch noch im Hinterkopf. Leider ohne Domain. Danke
Dejo
6. November 2009 um 20:51 UhrDiese Beispiele der großen Hintergründe sind wirklich faszinierend! Sehr schön und toll gemacht.
René
19. November 2009 um 22:35 UhrDie Seiten-umspannenden Backgrounds habe ich nun schon öfter gesehen, allerdings meist nur im englisch-sprachigen Raum. Das Beispiel von Ben mit dem Flash im Hintergrund ist echt eine tolle Idee, mit der man visuelle “Freiheit” mit Ladezeit-Überbrückung (Preloader-Animation) geschickt kombinieren kann. Danke.
Philipp Pistis
5. Februar 2010 um 01:13 UhrVielen Dank für diesen tollen Artikel.
Habe erst letzte Woche mit meinem Kollegen darüber gesprochen. Ich bin zwar nicht so ein Fan von großen Grafiken auf Websiten, doch wenn ich mir die Websiten oben ansehe, könnte ich meine Meinung ändern.
Bei diesen Websiten merkt man, dass Bilder das ganze Design bestimmen. Mit diesen Bildern schaut es schon sehr professionelle aus.
Bei Kulturbaunause ist es finde ich zu viel.
Hoddows Gastwerk und Red Rock finde ich dafür sehr schön.
Elena
24. Februar 2010 um 01:29 UhrSuper, danke fuer den interessanten Beitrag und die vielen Beispiele! Persoenlich meine ich, dass man gerade bei den grossen Hintergruenden aufpassen muss, die Seite nicht zu ueberladen. Wenn zuviele Details im Bild sind, wird es leicht unruhig und ueberreizt. Wenn man das Ganze aber harmonisch abstimmt, kann sowas wirklich einen sehr grossen Unterschied machen.
Carsten
24. März 2010 um 20:56 UhrKlasse Artikel, aber wenn ich ehrlich bin, kann auch ich mit den grossen Hintergrundbildern nicht allzu viel anfangen.
Jedoch sind mir vor allem auf kanadischen Seiten verstärkt Seiten aufgefallen, welche ein eindrucksvolles Motiv im oberen Drittel voll aufziehen und dann sanft in einen ruhigen Hintergrund umwandeln – dies halte ich in der Sache für einen guten Kompromiss.
Klaus
10. Mai 2010 um 14:32 UhrSuper Beitrag! An genau dieser Sache bin ich schon mal gescheitert, wegen der Ladezeiten. Ich werde das jetzt aber nochmal neu angehen, dank deines Berichtes.
Site Creation Webdesign
2. Juni 2010 um 10:30 UhrWenn das Bild zum Thema passt und es etwas aussagt ist es wirklich schön. Ansonsten nur eine Spielerei die meiner Meinung nach nicht so viel bringt.
Ich habe schon viele Websiten gesehen die schöne Hintergrundbilder haben. Doch möchte ich hier anmerken, dass man auch auf die Monitore mit einer HD Auflösung achten sollten. Denn bei meinen zwei 26 Zoll Monitoren sehen manche Websiten schon sehr komisch aus. Denn rechts ist dann alles weiß. Da verliert der Effekt an Wirkung.
Robert Götze, twago
9. Juli 2010 um 14:22 UhrSehr tolle Beispiele. Ich hab mich selbst auch schon öfter dabei erwischt, wie ich bei Webseiten mit großen Hintergrundbilder darüber nachgedacht habe, ob ich es gut oder schlecht finden soll. Meistens find ich es gut, aber es gibt eben auch schlechte Bilder (und schlechte Webseiten, da hilft auch ein gutes Bild nicht). Twitter-Backgrounds finde ich auch immer polarisierend.
Rolf
10. Juli 2010 um 16:04 UhrSehr schöner Artikel, mir gefällt besonders das ecoki-Design, der Hintergrund wirkt auf mich so harmonisch
Webdesign Mannheim
13. Juli 2010 um 17:09 UhrFinde große Hintergründe schon immer kritisch. Die Idee mit dem Radiergummi ist aber gar nicht mal so schlecht. Hat anidea aber bei einem Bild vergessen. Das sieht dann nicht mehr so prickelnd aus…
torsten
13. August 2010 um 00:39 UhrJetzt konnte ich nicht anders und habe beim Redesign (07/2010) auch große Hintergründe verwendet.