Hintergrundbilder eindrucksvoll mit CSS skalieren
Wie skaliert ringvemedia.com eigentlich das Hintergrundbild? Ein drweb-Leser fragt und wir haben uns die Seite genauer angeschaut.
Formatfüllende Hintergrundbilder und moderne Browser sind natürliche Feinde. Nur selten gelingt die perfekte Positionierung der Bilder und wenn, kommen gängige Methoden nicht ohne Flash oder JavaScript aus. Mit den guten alten Tabellen aus vergangenen HTML-Zeiten gelingt jedoch die verblüffend einfache Illusion des perfekten Hintergrundbildes.
Wie es sich für echte Illusionen gehört, ist der Effekt beeindruckend und der Trick banal. Allen Anfang bildet ein günstig dimensioniertes Hintergrundbild, das später dynamisch um einige Prozent hochskaliert wird. In Hinsicht auf aktuelle Auflösungen habe ich ein schönes Stadtmotiv mit der Größe von 1024x768 Pixeln gewählt.
Unser Testbild im Browser
Das Hintergrundbild
Für den Effekt des dynamischen Hintergrundbildes wird das gewählte Motiv als ganz normales Bild eingefügt und von einer Tabelle und zwei Div-Elementen umrahmt. Die sonst als "böse" verschriebene Tabelle macht - nicht ganz im Sinne der Erfinder - den Effekt erst möglich.
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>eigenlt
<td>
<img alt="background" src="files/bg.jpg" />
</td>
</tr>
</table>
</div>
</div>
Die Konstruktion an sich wirkt sehr obskur, ermöglicht aber, dank der besonderen Eigenschaften der Tabellen in HTML, die besten Voraussetzungen für die spätere Positionierung. Die eigentliche Hexenküche verbirgt sich im CSS. Zunächst werden alle Elemente mit Ausnahme des Hintergrundbildes auf maximale Höhe und Breite gebracht. Ebenfalls muss der Überlauf der Elemente verborgen werden, da sonst unschöne weiße Bereiche zu sehen sind und Scrollbalken eingeblendet werden.
html,body,#bg,#bg table,#bg td,#content {
width:100%;
height:100%;
overflow:hidden;
}
Einmal die Konstanten hergestellt, muss nur noch das Bild auf die richtige Größe und Position gebracht werden. Dazu benötigen wir einen gewissen Rahmen außerhalb des sichtbaren Bereiches, in den das Bild bei nicht exakter Proportion des Browserfensters mit der Grafik hinein laufen kann. Dies wird durch doppelte Ausmaße des zweiten Div-Elements mit einer negativen Verschiebung nach links oben erreicht.
#bg div {
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
}
Im letzen Schritt der großen Formatierung wird nun endlich das Hintergrundbild positioniert und skaliert. Der konstruierte Rahmen beträgt einheitlich 50% und das Bild muss nur gänzlich in die Mitte gebracht werden. Hier schlägt die Stunde der völlig zu Recht nur in notwendigen Maßen zu verwendenden Tabelle. So wird das Bild vertikal und über den Umweg der Textformatierung auch horizontal zentriert. Leider ist die Interpretation der Kniffs über die Textformatierung je nach Browser unterschiedlich. Um die maximale Kompatibilität zu erreichen, wird zusätzlich das Hintergrundbild noch mit automatischem Außenabstand zentriert. Als Block-Element nimmt das Bild automatisch die vollständige Breite ein und kann als schönes Hintergrundbild brillieren.
#bg td {
vertical-align:middle;
text-align:center;
}
#bg img {
min-height:50%;
min-width:50%;
margin:0 auto;
display:block;
}
Kurz und Knapp: Das Bild wird immer auf die vollständige Breite des Browserfensters skaliert. Es wird automatisch zentriert und kann bei falschen Proportionen in einen umlaufenden Rahmen ausweichen.
Der Inhalt über dem Bild
Das Bild ist perfekt, aber immer noch ein normales Bild und nicht im Hintergrund. In einem weiteren Div-Element wird der Inhalt der Webseite absolut links oben positioniert. Anschließend muss nur noch der Seiteninhalt mit dem z-index vor das Hintergrundbild geholt werden.
#content {
position:absolute;
top:0;
left:0;
z-index:70;
overflow:auto;
}
Fertig! Das nicht ganz gewöhnliche Hintergrundbild ist voll XHTML 1.0 Strict und CSS level 2.1 valide. Mit Ausnahme von minimalen Abweichungen im Bereich von einigen Pixeln stellt jeder aktuelle Browser die selbstskalierende Grafik korrekt dar. Ein komplettes Beispiel der Anwendung gibt es mit einer abendlichen Impression von New York im ZIP-Archiv. (tm)
Über Adrian Bechtold
Verwandte Artikel
(No Ratings Yet)
funktionieren.
