 zentriertes Hintergrundbild mittels Ebenen und Tabelle
 Mit CSS-Anweisungen ist eine Positionierung einer Hintergrundgrafik heute einfacher! Es handelt sich hier um ein älteres Beispiel. Immer noch ganz brauchbar, wenn Inhalte übereinander angeordnet werden sollen.
Es werden 2 Ebenen festgelegt die für den Betrachter hintereinander liegen. Stellen sie sich das vor wie 2 Glasscheiben die hintereinander stehen. In der hinteren Ebene liegt das Hintergrundbild, in der vorderen der Seiteninhalt.
Schritte
- Wir definieren 2 Ebenen, Hintergrundebene + Vordergrundebene
- In die Hintergrundebene wird das Bild notiert
- Das Hintergrundbild wird mittels 100% großer Tabelle zentriert
In die einzige Tabellenzelle einer 100% großen Tabelle in der Hintergrundebene, notiere ich das Hintergrundbild. Die Inhalte der Tabellenzelle sind vertikal und horizontal zentriert. Fertig!
| |
siehe auch  MENÜ DIVERSES - Inhalte zentrieren
(dort erläutere ich auch Näheres zu 100% hohen Tabellen)
 In die Vordergrundebene stellen wir den Seiteninhalt
2 Ebenen liegen übereinander
Innerhalb der BODY-Tags werden die Ebenen mittels DIV-Tags definiert. Zuerst die Hintergrundebene, danach die Vordergrundebene. Die Reihenfolge der Definition bestimmt (wenn sie keine weiteren Angaben machen) die Ebenenordnung: Die zuerst definierte Ebene staht ganz hinten, die zweite Eben davor, usw ...
Falls Sie mehrere Inhalte in verschiedenen Ebenen darstellen möchten, experimentieren sie doch mal mit der Reihenfolge der Definition für die Ebenen.
Code für die Hintergrundebene
<div id="hintergrund" style="position:absolute; left:0px; top:0px;">
<table border="0" height="100%" width="100%">
<tr><td valign="middle" align="center">
<img src="motorrad.jpg" width="295" height="300" border="0" alt="">
</td></tr>
</table>
</div>
Code für die Vordergrundebene (Seiteninhalt)
Den eigentlichen Inhalt des HTML-Dokuments lege ich ich in einer zweiten Ebene darüber. Die Definitoin dazu ist gleich.
<div id="text" style="position:absolute; left:0px; top:0px;">
Hier hinein den Seiteninhalt
</div>
Ebenenordnug festlegen
Sie können die Reihenfolge der Anzeige von Ebenen auch festlegen, indem sie Index-Nummern vergeben. Ebenen mit höherer Index-Nummer überdecken Ebenen mit niedrigerer Index-Nummer. Dann spielt die Reihenfolge der Notierung keine Rolle!
<div z-index="3" ... >
Vordergrund
</div>
<div z-index="1" ... >
Hintergrund
</div>
|
BEISPIEL1 
ZURÜCK