Beispiel 2
Diese DIV-Box hat:
- eine Grösse, die relativ zur Schriftgrösse definiert ist
(Breite: 40em, Höhe: 30em). - scheinbar ein "Hintergrundbild", das skalierbar ist
In Wirklichkeit sind hier - in einem relativ positionierten Container-DIV - zwei gleich grosse Ebenen (DIV-Elemente) an der gleichen Stelle genau "übereinander" absolut positioniert.
Im Vordergrund (z-index:1) steht das DIV-Element mit dem Text.
Im Hintergrund (z-index:0) steht das DIV-Element mit dem Bild, das als IMG-Tag eingebunden ist und per CSS auf die volle Grösse (height:100%; width:100%) des DIV-Elements skaliert wird.
Die Box mitsamt "Hintergrundbild" ist somit auch in Browsern, die beim Zoomen nur den Text vergrössern, voll skalierbar (so z.B. in MS IE 6, Firefox 1.0, 1.5 und 2.0 und selbst im altehrwürdigen Mozilla 1.3.1).