Thomas Weise 22. Juli 2008

100% Hintergrundbild im Browser

Kein Beitragsbild

Thomas Weise ist gelernter Anwendungsentwickler. Ihn zog es aber immer schon in...

Unabhängig von der Fenstergröße des Browsers wird mit diesem Trick das Hintergrundbild immer in voller Größe angezeigt – egal, wie groß das Bild in Wirklichkeit ist. Es wird nichts abgeschnitten oder dazugesetzt.

Eine der vielen Fragen eines Webdesigners: Für welche Bildschirmauflösung oder besser gesagt, für welche im Browser sichtbare Fläche optimiere ich meine Website? Eine zufriedenstellende Antwort gibt es leider nicht, weil die Palette von riesigen Monitoren bis hin zum Handy reicht. Also, was solls? Man nimmt einfach eben nur eine Hintergrundfarbe oder einen Farbverlauf und wählt ein flexibles Layout. Das klappt.

Was aber, wenn der Auftrag lautet: „Ein Bild soll den Hintergrund der Seite ausfüllen und nix soll dabei abgeschnitten werden, egal wie groß die sichtbare Fläche des Browserfensters gerade eben ist“… Einen möglichen Weg beschreibt Stu Nicolls.

In einer html-Datei werden drei „div’s“ erstellt. Eins für den gesamten Hintergrund. Eins für den festen Bereich links. Und eins für den scrollbaren Bereich rechts (dieser enthält dann noch ein div mit der id=“inhalt“. Als Hintergrundbild dient hier fridolin.jpg (1280×1024 groß, im gleichen Verzeichnis). Anstelle von fridolin.jpg können Sie dann Ihr gewünschtes Hintergrundbild platzieren.

<div> <img id="hintergrund" src="fridolin.jpg" alt="" title=""
/> </div>
<div id="fest"> <p>Diese linke Spalte hier ist fest
(fixed)</p>
</div>
<div id="scrollbar"> <div id="inhalt"> <p>Das ist der
scrollbare Bereich rechts.</p> </div>
</div> 

Erklärung: Wie man hier wohl schon erkennen kann, liegt der Trick darin, dass das „Hintergrundbild“ in Wirklichkeit gar kein Hintergrundbild ist, sondern in einem div-Bereich nur als normale Grafik eingebunden ist. Dies ermöglicht erst die Skalierung des „Hintergrundbildes“. Im Stylesheet wird dann dafür Sorge getragen, dass dieses Bild auch nicht von dem nachfolgenden Inhalt verdeckt wird (mit z-index) und so wirklich wie ein Hintergrundbild wirkt.

Das Stylesheet ist folgendermaßen festgelegt.

html, body {margin:0; padding:0; width:100%; height:100%;
overflow:hidden;}
#hintergrund {position:absolute; z-index:1; width:100%; height:100%;}
#fest {position:absolute; top:25px; left:10px; width:150px; z-index:10;
border:1px solid #000; padding:10px;}
#scrollbar {position:absolute; width:100%; height:100%; top:0; left:0;
overflow:auto; z-index:2;}
#inhalt {padding:5px 300px 20px 200px;} 

Erklärung: Hier wird für body UND html die Breite und die Höhe auf 100% gesetzt. z-index regelt die Sichtbarkeit.

Live-Demo zum Testen im neuen Fenster

Öffnen Sie die Demo und verändern Sie die Größe Ihres Browserfensters. Das Hintergrundbild sollte sich dann automatisch an die Größe Ihres Browserfensters anpassen. Demo herunterladen. Entpacken Sie die heruntergeladene demo.zip und starten im entpackten Verzeichnis die Datei demo.html. ™

Das Ganze wurde getestet in:

  • Internet Explorer 5.5 bis 8.0beta1
  • Firefox 2 und 3
  • Opera 9.26
  • Safari 3.1.1 (Windows-Version)

Erstveröffentlichung 22.07.2008

Thomas Weise

Thomas Weise ist gelernter Anwendungsentwickler. Ihn zog es aber immer schon in Richtung Internet und Webentwicklung. Seine Artikel auf drweb sind Gastartikel, selbst bloggt er auf
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

16 Kommentare

  1. das ganze geht dank CSS3 jetzt viel einfach, siehe hier:
    http://selmiak.bplaced.net/tech/index.php?art=n5

  2. Genial danke, so einfach und doch effektiv.
    DIV-Container sind doch immer wieder für Problemlösungen gut.
    Vielen Dank und viele Grüße, Iris.

  3. Sehr schön endlich das was ich gesucht habe. Auch ohne bild also mit Linear-Gradient zu verwenden.

  4. Hallo,

    ich bin noobie und habe eine Frage. Welchen Teil des Codes kommt in den HTML Code der Seite? UNd was kommt in die css Datei Stylesheet.css ?

    Irgendwie beschreibt keiner wie die css Datei aussehen muss.
    Für eine Info wäre ich sehr dankbar.

  5. Grundsätzlich ist das ja ganz schön, aber mit den fixen beiden Spalten schon ziemlich speziell.

    Ich habe für diesen Zweck dann doch eher diese Seite als Basis verwendet: http://www.cssplay.co.uk/layouts/background.html

    Wollen wir hoffen dass CSS3 bald flächendeckende Verbreitung findet!

  6. Hi, ich bin noch blutiger Anfänger, suche aber genau diese Lösung. Der Stylesheet Text kommt in die Template.css nehme ich an, aber ich welche html Datei kommen die div’s? Eine selbst erstellte (wo)?
    Vielen Dank..

  7. Schön, aber was mache ich, wenn ich möchte, dass das Hintergrundbild dabei nicht verzerrt wird? Also so wie hier: http://thestaffrepublic.com/

    Für Hilfe dankbar, probiere es schon eine Weile vergeblich.

    Sylvia

  8. Danke für die Tipps.

    Trotzdem, bei mir landet der Content immer unter dem Hintergrundbild…nicht darauf. Habe das hier vorgeschlagene CSS genutzt und den Quelltext aus der Vorlage.?
    Kann jemand helfen?

    Gruß

    Winfried

  9. Echt genial!
    Vielen Dank (der einzige Beitrag den man über Google findet, mit dem man auch was machen kann ;))

    Liebe Grüße,
    Christoph

  10. Sehr hilfreich. Danke !

  11. stark.

    auch bei mir genau das was ich gesucht habe.

    thx

  12. genau das was ich gesucht habe

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück