Hintergrund

In CSS besteht ein Hintergrund aus mehreren Ebenen.

Der "margin" ist zwar durchsichtig, aber er bildet mit der "background-color" die hinterste Ebene, die in CSS dargestellt wird. Darüber liegt das "background-image" gefolgt vom "border" und "padding". Der "Content" liegt am höchsten auf der Z-Achse. Es ist schon eine wenig 3-D auch wenn wir nur 2-D sehen.

Beispiel

Um die Ebenen übereinanderzulegen, definieren wir als Erstes eine Hintergrundfarbe.

Dazu verwenden wir unseren bestehenden <div>-Bereich vom Farbverlauf.

Hintergrundfarbe definieren


#farbverlauf {
 width: 300px;
 height: 300px;
 background-color: silver;
}

Nachdem der <div>-Bereich mit Farbe hinterlegt ist, packen wir darüber ein Bild im PNG-Format mit entsprechender Transparenz, um die Hintergrundfarbe hinter dem Bild durchscheinen zu lassen.

Hintergrundfarbe definieren


#farbverlauf {
 width: 300px;
 height: 300px;
 background-color: silver;
 background-image: url(power.png);
}

Silberner Hintergrund mit Grafik im Vordergrund

Zu guter Letzt packen wir einen Text auf das Hintergrundbild und betrachten, wie die verschiedenen Ebenen zusammenspielen.

Text über Grafik und Hintergrundfarbe


<body>
...
 <div id="farbverlauf">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</body>

Silberner Hintergrund mit Grafik im Vordergrund und Text als oberste Ebene

Die hinterste Ebene ist die Hintergrundfarbe, darüber liegt das Hintergrundbild und oben drauf im Vordergrund ist der Text zu erkennen.

Wiederholung

Wenn das Hintergrundbild genug Platz in seinem Element hat, dann wiederholt es sich, bis der Platz aufgebraucht ist.

Der Standardwert für die Eigenschaft "background-repeat" ist "repeat". Wir vergrößern unseren <div>-Bereich und sehen das sich das Hintergrundbild in horizontaler und vertikaler Richtung wiederholt.

Bereich vergrößern


#farbverlauf {
 width: 600px;
 height: 600px;
 background-color: silver;
 background-image: url(power.png);
}

Wenn eine Wiederholung entlang der horizontalen Linie erwünscht ist, aber nach unten keine Wiederholung erfolgen soll, dann geben wir der Eigenschaft "background-repeat" den Wert "repeat-x".

Wiederholung nur auf horizontaler Achse


#farbverlauf {
 width: 600px;
 height: 600px;
 background-color: silver;
 background-image: url(power.png);
 background-repeat: repeat-x;
}

Wiederholende Hintergrundgrafik auf horizontaler Linie

Durch den Wert "repeat-y" ist auch eine Wiederholung entlang der vertikalen Linie möglich. Nebeneinander stehen die Bilder dann aber nicht mehr. Wenn das Bild nur einmal auftreten soll und keine Wiederholung erwünscht ist, dann wird der Wert "no-repeat" vergeben.

Kurzschreibweise

Selbstverständlich gibt es auch eine Kurzschreibweise in CSS.

Kurzschreibweise für Hintergrundeigenschaften


#farbverlauf {
 width: 600px;
 height: 600px;
 background: silver url(power.png) repeat-y fixed;
}

Bei der Kurzschreibweise wird zuerst die Hintergrundfarbe angegeben, darauf folgt das Hintergrundbild. Die nächsten beiden Parameter sind optional für die Ausrichtung (left, top usw.). Nun wird angegeben, wie sich der Hintergrund wiederholen soll, bevor wir den Hintergrund sogar festnageln können. Wenn die Eigenschaft "background-attachment" den Wert "fixed" bekommt, dann steht das Hintergrundbild an dieser Position. Wenn wir nun mit der Webseite scrollen, bleibt der Hintergrund stehen und es sieht so aus, als würden wir die Seite über den Hintergrund hoch und runter schieben.

Weiter mit Tabellen