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 http://www.baederland.de
So long. Gruß Ralf
Uli Thiel
1. Mai 2012 um 15:47 UhrHab mir die Bäderlandseite angesehen – danke für Deinen Tipp!
Sehr machbare Lösung die überall funktionieren dürfte.
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.
heinz
23. Oktober 2009 um 12:53 UhrWunderschön sind sie alle. Danke fürs Zeigen und für die Tipps! Grüße und ein schönes Wochenende!
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.
peter
28. Oktober 2009 um 11:45 Uhrwow – danke für die tips! ich wollte schon öfter mal einen solchen hintergrund ausprobieren, aber dann war es mir zu kompliziert. das bild von kulturbanause ist natürlich supercool, aber wohl auch superschwer. aber jetzt habe ich genug anregungen, um mal wieder etwas zu basteln… vielen dank:)
Ben
28. Oktober 2009 um 23:16 Uhrhttp://www.Schlossanger.de
Lennart Prange
30. Oktober 2009 um 16:49 UhrHatte ich auch noch im Hinterkopf. Leider ohne Domain. Danke 😉
Patrick
9. Februar 2010 um 20:17 UhrBei dieser Seite finde ich das der Hintergrund bei der Seitenanzahl doch schon ziemlich nervt.
Auch das Aufklappen vom Menü ist doch arg Gewöhnungsbedürftig.
Trotz das es insgesamt natürlich eine brilliante Seite ist!
Tanja Hammerl
29. Oktober 2009 um 00:31 Uhr“Schöner Beitrag, jetzt fehlt nur noch ein How-To oder eine dementsprechende Linksammlung.”
So ist es!
Dejo
6. November 2009 um 20:51 UhrDiese Beispiele der großen Hintergründe sind wirklich faszinierend! Sehr schön und toll gemacht.
Thomas
10. November 2009 um 15:50 UhrDie Hintergrundbilder sind ja mal wirklich Klasse, ich bin auch am überlegen ob ich ein Bild als Hintergrund einstellen werde. 🙂
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.
gambler
8. Dezember 2009 um 15:13 UhrDas sieht schon top aus, aber ist auch immer so eine Frage, wie man es umsetzt, sprich gute Bildqualität und trotzdem Dateigröße in Grenzen halten, damit die Page trotzdem noch in einer guten Geschwindigkeit aufgebaut wird.
Webdesign Hannover
8. Januar 2010 um 09:30 UhrGroße Hintergrundbilder sind wirklich ein hervorragendes Element um das Browserfenster schön und komplett zu befüllen.
Meiner Erfahrung nach sollte man wirklich große Dateien erstellen und ein wenig bei der Qualität einsparen, da es meist nicht wirklich auffällt.
Vom Skallieren würde ich absehen, da viele Rechner mit schlechteren Grafikkarten die Leistung nicht mehr bringen und das scrollen dann stark zu ruckeln anfängt.
Grüße aus Hannover
Lorincz Istvan
30. Januar 2010 um 15:32 UhrMan kann eine JPEG auch progressiv speichern. Damit sieht man das grobe Bild solange nicht das gesamte geladen ist.
Siehe http://www.faqs.org/faqs/jpeg-faq/part1/section-11.html
Ein weiterer guter Artikel:
Optimizing Web Graphics , siehe
http://www.websiteoptimization.com/speed/12/
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.
Webdesign Rosenheim
11. Februar 2010 um 15:32 UhrIch finde die Seiten sehr schön. Allerdings sollte man die Ladezeiten nicht komplett außer Acht lassen. Es gibt immerhin noch eine große Anzahl an Leuten die noch kein DSL zur Verfügung haben und somit ewig warten (müssten) bis die Seite geladen ist.
Laut verschiedenen Erhebungen warten User aber nur ca. 2-3 Sekunden bis sie etwas brauchbares sehen. Ist die Seite bis dahin (oder die wesentlichen Teile) nicht geladen, verlassen diese die Seite wieder.
Das sollte man vielleicht im Hinterkopf behalten.
Grüße aus Rosenheim
k²bytes
12. Februar 2010 um 13:09 UhrIch finde die großen Grafiken super, solange sie auch zum Gesamtkonzept der Seite passen. Wie Du schon geschrieben hast, sollte man die Ladezeit nicht vernachlässigen. Auch wenn es immer schneller Verbindungen gibt, ist nicht jeder damit ausgestattet (mobiles Internet wird z.B. auch immer mehr genutzt) und wenn der Server überlastet ist, nützt auch eine schnelle Internetverbindung nichts.
Julia
20. Februar 2010 um 12:37 UhrIch finde es auch Problematisch große Grafiken in den Hintergrund zu legen. Bisher habe ich kleine sich wiederholende Grafiken in den Hintergrund gelegt.
Ben hat das aber gut gelöst (so wie es scheint).
Die Grafik erst nachladen, wenn das Dokument vollständig geladen ist und dann langsam einblenden.
Super Lösung!! Schaut es euch mal an!!
Andreas B.
20. Februar 2010 um 18:45 UhrDie Tipps in dem Bericht sind sehr interessant. Ich finde die Variante, bei der das Bild unten ausradiert, besonders gut, aber es kommt natürlich immer auf die jeweilige Webseite an. Das Beispiel der Seite ecoki ist aber auch sehr schön gelungen. Allerdings ist dort auch nur wenig Text zu lesen, daher kann man da auch mit solchen Landschaftsbildern arbeiten. Das letzte Beispiel von FA Design finde ich fast schon zu überladen. Eine Slideshow im Hintergrund würde mich als Betrachter nerven, dementsprechend finde ich es gut, dass in dem Artikel davon abgeraten wird.
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.
Sascha
9. März 2010 um 19:59 UhrIch habe einen großen 30-Zoll-TFT von Apple und bin immer auf der Suche nach großen Wallpapern, die bei meiner riesigen Auflösung von 2560 x 1600 Pixeln weder gestreckt noch wiederholt werden müssen. Immer häufiger sehe ich jetzt Webdesigns, die auf Hintergründe großen Wert legen, was michpersönlich sehr freut, weil das grelle weiß doch sehr schlecht für die Augen sein kann.
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.
Webdesign Berlin
4. September 2010 um 15:40 UhrIch finde große Hintergrundbilder genial. Man muss aber auch die passenden auswählen und dabei achten das die Farben mit dem Rest harmonieren.
Es mach schon was aus wenn man schöne Bilder hat.
Gruß aus Berlin
Alexander Gessler
7. September 2010 um 10:54 UhrNette Zusammenstellung…
Andreas
31. Mai 2011 um 18:41 UhrMeine Kunden verlangen immer öfter große Hintergrundbilder. Finde es schon lustig das das Haupt-Augenmerk immer noch auf das Design gerichtet ist. Die Suchmaschinenoptimierung sieht man halt nicht ,das muss man dem Kunden immer wieder erklären und auch näherbringen!
Ebenso das eine gewisse Masse von Text auf der Hauptseite wichtiger ist als ein schöner Hintergrund.
Google interessiert sich halt immer noch für guten Content und weniger für schöne Photos 🙂
Doch für die reine Optik ist so ein toller Hintergrund natürlich klasse!!
Man kann halt nicht alles haben….
Norbert von Suchmaschinenoptimierung NL-DIGITAL
18. Juni 2011 um 09:23 UhrToller Beitrag! Die Idee mit dem Radiergummi ist super. Generell finde ich große Hintergründe sehr attraktiv. Werde mich auf jeden Fall einmal damit auseinandersetzen. Es ist ein wirklich gutes Gestaltungsmerkmal. Danke für die tolle Toolsammlung.
Robert webdesign
30. Juni 2011 um 12:06 UhrToller Beitrag!!
hier mal unsere Umsetzung http://www.repro-design.de
mit einem großem Hintergrundbild
Uli Thiel
1. Mai 2012 um 15:49 Uhrsuper design! gefällt mir ausgesprochen gut – dass ihr ein hintergrundbild gewäht habt mit inhaltlichem bezug zu eurem business.
oft sieht man eine blumenwiese oder andere – sicher schöne – hintergründe und ich frage mich wo ist der inhaltliche bezug zum restlichen content.
mario cds
20. Juli 2011 um 12:28 Uhr@robert
das gefällt mir richtig gut das webdesign! tolle sache. ich werde auch einmal versuchen so ein design zu kreieren. wenn ich hilfe brauche, wende ich mich an dich?
herzliche grüße, mario