16.11.2008
Zwei Hintergrundgrafiken zuweisen
Mitunter entsteht aus gestalterischen Gründen das Bedürfnis, einem Element zwei unterschiedliche Hintergrundgrafiken zuzuweisen. Um es vorwegzunehmen: Das geht nicht. Ein Element kann immer nur eine Hintergrundgrafik enthalten. Aber es gibt natürlich auch wieder einen CSS-Trick, um dennoch ans Ziel zu kommen.
Wenn man nur einen Hintergrund pro Element verwenden kann, dann benutzen wir eben zwei Elemente, um zwei Hintergrundgrafiken unterzubringen.
Für den oberen Bereich einer Website soll eine Farbverlaufgrafik eingesetzt werden, welche ich mir von der PI-Fundgrube besorgt habe. Man kann solche Grafiken mit einem Grafikprogramm wie Ulead Photo Impact X3
Zusätzlich soll eine weitere Grafik in diesem Bereich rechts oben platziert werden, im Beispielfall die Grafik "watzmann.jpg".
Wir benötigen also zwei halbwegs identische Elemente, denen wir je eine Grafik zuweisen.
In diesem Fall verwenden wir für die Farbverlaufgrafik das Element "html" sowie für die Watzmann-Grafik den "body".
Die Farbverlaufgrafik soll sich nur auf der X-Achse wiederholen. Schließlich werden der Überschrift "h1" noch einige Formatierungen zugewiesen.
Daraus resultieren folgende CSS-Angaben:
html {
background: #fff url(farbverlauf_schwarz_weiss.gif) repeat-x;
}
body {
margin: 0;
background: url(watzmann.jpg) no-repeat top right;
}
h1{
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-size: 90px;
line-height: 250px;
}
Der benötigte HTML-Code ist recht spartanisch:
<body>
<h1>Der Watzmann ruft</h1>
</body>
Das Ergebnis zeigt unsere Demoseite.
Der gleiche Effekt lässt sich natürlich auch mit verschachtelten Div's gleicher Größe erzielen.