29.12.2008
Bildschirmfüllende Hintergrundgrafik
Ein häufiges Problem vieler Webmaster: Wie kann eine Hintergrundgrafik unabhängig von der Fenstergröße immer bildschirmfüllend angezeigt werden.
Grundsätzliche Antwort: Überhaupt nicht, denn Hintergrundgrafiken lassen sich nicht skalieren.
Insofern ist auch - zugegeben - die Überschrift dieses Kapitels irreführend. Aber ich habe sie so gewählt, weil im Internet doch immer wieder nach diesem Begriff gesucht wird.
Allerdings: Mit Hilfe von CSS lässt sich auch dieses Problem lösen: Wir müssen lediglich dafür sorgen, dass es sich bei der Grafik nicht um eine Hintergrundgrafik, sondern um ein skalierbares Image handelt. Hierzu verwenden wir folgenden Trick:
Wir definieren einen Div "#hintergrund", welchem wir 100% Höhe und 100% Breite zuweisen. Da sich diese Werte auf html und body beziehen, legen wir ebenso für html und body 100% Höhe und 100% Breite fest. Um Ränder zu vermeiden, setzen wir für html und body margin und padding auf "0".
Damit das "Hintergrundbild" auch bei längerem Inhalt bildschirmfüllend angezeigt wird, weisen wir "html und body" noch ein "overflow: hidden" zu.
Den "#hintergrund" positionieren wir relativ mit ebenfalls 100% Breite und 100% Höhe, um den folgenden Content darin entsprechend unterzubringen.
Der "#content" soll dagegen bei größerem Inhalt scrollbar sein. Deshalb erhält er ein "overflow: auto".
Schließlich sorgen wir noch mit entsprechenden z-Indizes dafür, dass sich #content vor #hintergrund befindet.
Daraus ergeben sich folgende CSS-Angaben:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#hintergrund {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: auto;
}
Im HTML-Quelltext wird nach dem Öffnen von <body> der img-Tag geöffnet, dem wir den zuvor definierten ID "#hintergrund" zuweisen.
Damit wird die verwendete Grafik auf jeweils 100% Höhe und 100% Breite skaliert.
Dem img-Tag wird als Source die verwendete Hintergrundgrafik zugewiesen; im Beispiel die Grafik "bg1.jpg".
Im Anschluss daran folgt unser #content, in den wir beliebigen Inhalt einfügen können.
Daraus ergibt sich folgender HTML-Quelltext:
<body>
<img id="hintergrund" src="bg1.jpg" border="0" alt="Hintergrundbild">
<div id="content">
<h1>Inhalt</h1>
</div><!--Ende #content-->
</body>
Als Ergebnis erhalten wir eine skalierte Hintergrundgrafik, die sich allen Bildschirmgrößen anpasst. Indem ihr die Demo öffnet, könnt ihr bei vergrößertem oder verkleinertem Bildschirmfenster testen, dass die Hintergundgrafik stets bildschirmfüllend angezeigt wird.
Hinweise über die Nachteile bildschirmfüllender Grafiken
Die Verwendung der beschriebenen Methode birgt folgende Nachteile, über die man sich im Klaren sein muss:
- Durch die Skalierung der Grafik kommt es zwangsläufig zu Verpixelungen. Dadurch wird die Qualität der Grafik negativ beeinträchtigt.
- Große Grafiken führen zu einer längeren Ladezeit der entsprechenden Grafiken bzw. der Seiten, bei denen sie verwendet werden.
- Da jedes Bildschirmfenster ein unterschiedliches Höhen-/Breitenverhältnis aufweisen kann, müssen die Proportionen der verwendeten Grafik in der Anzeige im Verhältnis zur verwendeten Grafik nicht immer stimmen.
Quelle:
Die Anregung zu dieser Anleitung stammt von Dr. Web .