12.05.2008
Dynamische Hintergrundgrafik
Wer ein flexibles Layout verwendet, steht oft vor dem Problem, wie er eine Headergrafik so einbindet, dass sie die gesamte Bilschirmbreite - unabhängig von der Bildschirmauflösung - einnimmt.
Hierzu muss man etwas tricksen, vor allem eine Grafik wählen, die sich "in die Breite ziehen lässt".
Unser Endergebnis soll wie in der Demo dargestellt aussehen und sich verschiedenen Bildschirmbreiten anpassen. Wir benötigen hierzu drei Div's, welche zusammen unsere Gesamt-Headergrafik ergeben. Dementsprechend verwenden wir für jeden Div eine Teil-Grafik, wobei in diesem Beispiel folgende Grafiken zum Einsatz kommen sollen:
Füllgrafik "mitte.jpg"
Grafik links "links.jpg"
Grafik rechts "rechts.jpg"
Die hier verwendeten Motive sind zwei einzelne Bilder. Natürlich wird man solch einen einheitlich blauen Himmel nur äußerst selten vorfinden. Deshalb wurden die Bilder mit dem Grafikprogramm Ulead Photo Impact X3
Wichtig ist ferner, dass alle Grafiken die gleiche Höhe haben.
Die Füllgrafik "mitte.jpg" soll dazu dienen, die Grafik bei größerer Bildschirmbreite zu strecken. Wir fügen sie deshalb in einen div #header als Hintergrundgrafik ein und lassen sie sich horizontal wiederholen (kacheln). Zur Sicherheit geben wir noch eine Hintergrundfarbe an, welche der kachelnden Grafik entspricht. Wenn dieser "Füller" eine einheitliche Farbe hat, kann man auf die Hintergrundgrafik auch ganz verzichten. Damit anschließend die beiden anderen Grafiken links bzw. rechts positioniert werden können, verwenden wir für den #header ein "position: relative;". Schließlich weisen wir noch einen height-Wert zu, welcher dem der Grafiken entspricht. Der margin-Wert ist nicht unbedingt erforderlich; er soll für etwas Abstand sorgen. Daraus ergibt sich folgender CSS-Code:
#header
{
background-image: url(mitte.jpg);
background-repeat: repeat-x;
background-color: #618cd2;
position:relative;
height: 150px;
margin: 20px;
}
Die Linke Grafik "links.jpg" positionieren wir als Hintergrundgrafik so, dass sie "links oben" platziert wird. Da sich diese Grafik nicht wiederholen soll, müssen wir dies mit einer entsprechenden Angabe unterbinden. Ebenso weisen wir ihr einen z-index zu, was bewirken soll, dass sich - falls der Platz zu schmal wird - die rechte Grafik darüber legen kann.
Diese Eigenschaften finden sich in folgendem CSS-Code:
#header_links
{
background-image: url(links.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 549px;
height: 150px;
}
Für die rechte Grafik "rechts.jpg" gilt im Prinzip das Gleiche, nur dass sie nicht links oben, sondern rechts oben positioniert wird, andere Ausmaße hat und einen höheren z-index erhält:
#header_rechts
{
background-image: url(rechts.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
z-index: 2;
width: 271px;
height: 150px;
}
<div id="header">
<div id="header_links"></div><!--Ende header_links-->
<div id="header_rechts"></div><!--Ende header_rechts-->
</div><!--Ende header-->
Der #header mit der Kachelgrafik bildet dabei den "Rahmen" und beinhaltet die beiden Div's #header_links und #header_rechts
Wenn ihr euch nun das Ergebnis in der Demo anseht, verkleinert oder vergrößert einmal das Bildschirmfenster und achtet darauf, was mit der Header-Grafik passiert.
Das Verkleinern des Bildschirmfensters ist so lange "unschädlich" wie die Summe der Breitenwerte von Links- und Rechts-Grafik der Bildschirmbreite entspricht. Reicht die Bildschirmbreite dafür nicht aus, kommt es zur Überlappung. Achtet also deshalb darauf, dass ihr die Breite nicht zu groß wählt, damit auch bei geringerer Auflösung dieser Effekt möglichst nicht eintritt.