100% Hintergrundbild im Browser
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 (1280x1024 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. (tm)
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
Über Thomas Weise
Seine Artikel auf drweb sind Gastartikel, selbst bloggt er auf Website. Weitere Beiträge für Dr. Web: 10
Verwandte Artikel
(No Ratings Yet)
