Hintergrundbild automatisch an volle Browser-Fenstergröße anpassen
Wie kann man ein Hintergrundbild automatisch an die volle Browser-Fenstergröße anpassen und zwar so, dass es unter verschiedenen Gegebenheiten gut aussieht?
Es sollen keine weißen Balken produziert werden, Proportionen des Hintergrundbildes sollen erhalten bleiben (egal wie man skaliert), das Bild sollte immer zentriert bleiben, Scrollbalken sollte es nicht geben und unterschiedliche Browser sollten keine Kompatibilitätsprobleme haben.
Auf der Suche nach einer Lösung, um das Hintergrundbild schön an das Browserfenster anzupassen, bin ich auf die Webseite von Chris Coyer aus Wisconsin USA gestoßen. Er hat sich die Mühe gemacht und stellt Wege bereit, wie man ein Hintergrundbild permanent und automatisch an das Browserfenster anpassen kann. In einem Artikel stellt er 4 Lösungen vor, die mit CSS umgesetzt werden.
Ich selbst habe es bereits in 2 Projekten umgesetzt:
Bei der Schauspielerin Anne B. Scrott
und
bei einem Vertrieb für Anker und Ketten: IMS Hamburg
Es hatte einen guten Anklang bei meinen Webdesignkunden und ich denke, dass die obigen Designs schön anzuschauen sind. Im Allgemeinen denke ich, dass großflächige Hintergründe modernen ausschauen. Das liegt daran, dass man es noch nicht so häufig sieht, es aber im kommen ist. Klar passt es nicht immer, aber in vielen Fällen kann man ja auch was dezentes als Hintergrund einsetzten.
Die wohl am schnellsten umsetzbare Lösung ist die hier:
In die Css-Datei
html
{background: url(beispielbild.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ich empfehle ein Bild zu verwenden, dass zwischen 1400 und 1800 Pixel breit ist. Es sollte ein querformatiges Bild sein.
Kategorie: Design 8 Kommentare »
am 6. September 2011 um 11:27 Uhr | #
Danke für diesen Tipp!
Das habe ich bisher noch nirgendwo gelesen.
Kann ich aber auf meiner Website mit Sicherheit gut gebrauchen – alleine für das Hintergrundbild in der Fußzeile. Ich hoffe das geht überhaupt, da ich das Bild ja nur in der Fußzeile haben möchte und dann auch noch als png.
Damit werde ich mich am Wochenende mal beschäftigen.
Herzliche Grüße
Klaus
am 13. Mai 2012 um 09:46 Uhr | #
Ja, kann dem nur zustimmen. Gerade im Bereich Künstler-Websites und Schauspieler sind solche Hintergründe sehr gefragt. Ich kann hier aus eigner Erfahrung sprechen und das nur bestätigen. Zum einen sind solche Hintergründe relativ selten und zum anderen sieht es einfach schön aus. Es hebt sich von der breiten Masse ab und hat einen hohen idividuellen Touch. Auch wirkt so ein Hintergrund mit der jeweiligen Person sehr persönlich, was bei dieser Art von Website ja gewollt sein dürfte!
am 9. Januar 2013 um 23:58 Uhr | #
Oh, vielen Dank.
Warum finde ich diesen Artikel erst heute? Habe ich schon lange nach gesucht.
Lieben Gruß
Alex
am 28. März 2013 um 00:39 Uhr | #
Kannst du bitte den direkten Link angeben oder selbst schreiben, wie das geht. Der allgemeine Link zu css-tricks hilft nicht!
am 28. März 2013 um 10:13 Uhr | #
Soeben geschehen
am 8. April 2013 um 13:12 Uhr | #
Danke für den Tip. Bei mir funktioniert das aber leider nur lokal. Im web wird das Bild nicht gefunden. Muss ich da etwas bei der Image-URL anpassen?
am 8. April 2013 um 13:35 Uhr | #
Das Bild auch uploaden und vorher richtig verweisen (relativ zum Html-Dokument).
am 8. April 2013 um 14:50 Uhr | #
Jaja, klar. Das Bild muss hochgeladen sein und richtig verlinkt sein
Irgendwie waren aber die Rechte auf das Foto auf dem Server verstellt.
Danke.