Hintergrundbilder bei CSS-basierten Layouts

Falls man jeder Spalte einen eigenen Hintergrund zuweisen möchte und vorher nicht weiss, wieviel Inhalt in den verschiedenen Spalten sein wird, kann man sich aber mit einem Trick in der Verwendung von Hintergrundbildern helfen. Dies funktioniert bei Fixbreiten-Layouts sehr einfach, indem man dem übergeordneten container-div, der immer automatisch so hoch wie die höchste in sich beinhaltete Spalte wird, eine Hintergrundgrafik zuweist. Bei Fixbreiten-Layouts geht das deshalb sehr einfach, weil man hier auch schon im Vorhinein weiss, wie breit die einzelnen Spalten sind (und auch bei einer anderen Browserfenstergröße noch immer sind).

Möchte man also z.B. nur die linke Spalte (unabhängig von ihrem Inhalt) mit einem blauen Hintergrund versehen, so fertigt man im Bildeditor seiner Wahl eine Grafik mit genau derselben Breite wie diese Spalte an, in unserem Beispiel ist dies für die linke Spalte 180 Pixel und - weil sich der Hintergrund in vertikaler Ausdehnung nur wiederholen soll, reichen hier 1 Pixel Höhe (hier der Anschaulichkeit halber 20 px). Die Grafik sieht für sich alleine folgendermaßen aus:



Der Clou dabei ist jetzt dass man diese Grafik wie gesagt nicht dem Navigationsbereich als Hintergrund zuweist, sondern dem übergeordneten container-div.

#container {
background: #E1FCFF url(bgbild.gif) repeat-y top left;
}

Damit reicht die "Spalte" wirklich von ganz oben bis unten zum Footer. Aus dem Navigationsbereich als auch dem content-Bereich muss man die Hintergrundfarben entfernen (sofern per CSS welche zugewiesen wurden), damit der Hintergrund des dahinterliegenden container-divs durchscheinen kann. Durch die Angabe einer Hintergrundfarbe UND eines Hintergrundbildes für den container-div wie in unserem Beispiel hat man dort, wo das 180 Pixel breite Bild liegt, eine dunklere Hintergrundgrafik und überall anders eine hellere Hintergrundfarbe (hier #E1FCFF) - unabhängig von der Höhe der Spalten.

Beispiel: "linke Spalte" per Hintergrundgrafik hervorgehoben

Möchte man bei einem 3-spaltigen Fixbreitenlayout die mittlere Spalte mit einem z.B. orangefarbenen Verlauf und die rechte Spalte mit einem grünfarbenen Verlauf einfärben (nur um zu zeigen, dass auch das geht - kein Anspruch auf optimale Farbgebung), kann man entweder eine Grafik anfertigen, die genau so breit wie zweite und dritte Spalte gemeinsam ist, beide Spalten entsprechend faerbt und anschließend für den container aber rechtsbündig zuweist

#container {
background: #E1FCFF url(bgbild2.gif) repeat-y top right;
}

oder die Hintergrundgrafik genauso breit wie den gesamte übergeordneten Container macht; aber den Bereich der ersten Spalte transparent läßt (und damit die Hintergrundfarbe wieder durchcheint):

#container {
background: #E1FCFF url(bgbild3.gif) repeat-y top left;
}

Natürlich kann man auch alle drei Spalten durch eine Hintergrundgrafik mit 3 verschiedenfarbigen Flächen simulieren, aber die transparenten Spalten lassen sich schneller per CSS auf eine andere Farbe umstellen, ohne dass man eine neue Hintergrundgrafik erzeugen muss.

Beispiel: 3spaltiges Layout, rechtsbündige Hintergrundgrafik für 2 Spalten
Beispiel: 3spaltiges Layout, linksbündige Hintergrundgrafik für 2 Spalten, 1 Spalte transparent