WebdesignerZu meiner PersonWebdesignpreiseWebdesignreferenzenBlogKontakt

  

 

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 mehreren Projekten umgesetzt:

Bei der Schauspielerin Anne B. Scott

und

bei der Flugschule Tegelberg

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 kommt:

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;
}

html, body{
width: 100%;
min-height:100%;}

Ich empfehle ein Bild zu verwenden, dass zwischen 1400 und 1800 Pixel breit ist. Es sollte ein querformatiges Bild sein.



Kategorie: Design 14 Kommentare »

14 Reaktionen zu “Hintergrundbild automatisch an volle Browser-Fenstergröße anpassen”

  1. Klaus

    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

  2. http://www.core-design-studio.de

    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!

  3. Alex Hache

    Oh, vielen Dank.
    Warum finde ich diesen Artikel erst heute? Habe ich schon lange nach gesucht.
    Lieben Gruß
    Alex

  4. Anonymous

    Kannst du bitte den direkten Link angeben oder selbst schreiben, wie das geht. Der allgemeine Link zu css-tricks hilft nicht!

  5. Michael Janik

    Soeben geschehen

  6. wolfgang

    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?

  7. Michael Janik

    Das Bild auch uploaden und vorher richtig verweisen (relativ zum Html-Dokument).

  8. wolfgang

    Jaja, klar. Das Bild muss hochgeladen sein und richtig verlinkt sein ;-)
    Irgendwie waren aber die Rechte auf das Foto auf dem Server verstellt.
    Danke.

  9. Markus Bäcker

    Tolle CSS-Formatvorlage. Hat mir sehr geholfen.
    Vielen Dank

    Markus

  10. Chris

    Danke für den hilfreichen Artikel. Hatte seid einiger Zeit mit genau diesem Problem auf Arbeit zu tun. Jetzt funktioniert es einwandfrei. (:

  11. max

    vielen dank für den tip.
    funktioniert gut.

    eine wichtige frage hätte cih aber:
    ich will das seitenverhaltnis der grafik variabel lasse, sodass die außenkanten des bildes immer am inneren fensterrand liegen,
    wie muss ich dann den code verändern?

  12. Fischwaage

    Super genial! Vielen Dank!

  13. Michael Janik

    html auf height:100%; width: 100%;
    und bei body: background-image:url(back.jpg); min-height: 100%; width: 100%; background: fixed; background-size: 100% 100%;

    Hoffe konnte helfen.

  14. Martin

    SUPER!

    Vielen Dank für diesen tollen TIPP!

    Beste Grüße
    Martin


Kommentar schreiben

Kommentar (Bitte mindestens 3 Sätze)