Grundlagen CSS
Hintergründliches
Damit unserer Text, über dessen Formatierung wir in den letzten 3 Kapiteln nun eiinges gelernt haben, auch richtig zu Geltung kommt, brauchen wir noch einen entsprechenden Hintergrund. Dabei kann es sich um eine einfache Farbe oder aber auch im ein Hintergrundbild handeln. CSS-Angaben zum Hintergrung werden vor allem bei "blockbildenenden Elementen" angewendet, wie etwa. div. Man kann sie jedoch auch auf das body-Eement anwenden - in diesem Fall gilt die Angabe dann für die gesamte Bildschirmseite.
Hintergrundgestaltung
Kapitel 11
Fangen wir also erst einmal mit der Definition einer Hintergrundfarbe an. Dafür benötigen wir die Angabe background-color in der CSS, der dann, wie in HTML üblich, hexadezimale Farbwerte zugeordnet werden können.
Beispiel
(Hintergrundfarbe)
In diesem Beispiel wurde durch die nachstehende Anweisung die Hinterundfarbe dieser Box auf einen dunklen Türkiston gesetzt.
div.tuerkis { background-color:#465F55; }
Auf diese - sehr einfache - Weise kann man einem HTML-Element jede beliebige Hintergrundfabe zuweisen. Daneben gibt es aber auch noch die Möglichkeit, einen Hintergrund mittels eines Hintergrundbildes zu gestalten. Dies geschieht mit der CSS-Angabe der Eigenschaft background-image. Als Wert kann dieser Eigenschaft ein Bild zugewiesen werden in den Formaten .jpg, .gif oder auch .png. Hierbei müssen die allgemeinen HTML-Regeln für Pfadangaben (absolut oder relativ) beachtet werden.
Wird hier nichts weiter angegeben, so wiederholt sich das verwendete Hintergrundbild tapetenartig horizontal und vertikal bis zur Grösse des Elementes, auf welches es angewendet wurde.
Beispiel
(Wiederholter Hintergrund )
Hierfür ein Beispiel: Ich kreiere das Hintergrundbild "hintergrund1.jpg", welches ich auf den folgenden Text anwenden möchte. Dann mache ich folgende Angabe in der CSS:
div.hintergrund1 { background-image:url(hintergrund1.jpg); }
Man kann jedoch auch auf das Wiederhol-Verhalten von Hintergrundbildern gezielt Einfluss nehmen, indem man die Eigenschaft background-repeat anwendet. Dabei gibt es die Varianten repeat (wiederholen - wie oben gezeigt), repeat-x (nur waagrecht wiederholen), repeat-y (nur senkrecht wiederholen) und no-repeat (nur einmalig anzeigen).
Beispiel
(Einzelnes hintergrundbild)
Wieder nehmen wir dafür unseren Hintergrund "hintergrund1.jpg", welchen ich in diesem Falle allerdings nur einmalig anzeigen lassen möchte. Dazu brauche ich folgende Angabe in der CSS:
div.hintergrund1 { background-image:url(hintergrund1.jpg); background-repeat:no-repeat;}
Daneben haben wir noch die Möglichkeit, ein Hintergrundbild quasi "festzusetzen". Hierzu kommt die Eigenschaft background-attachment zum Einsatz. Zusammen mit background-image kann hier ein sogenannter "Wasserzeichen-Effekt" erzeugt werden. Das bedeutet, dass das Hintergrundbild beim scrollen "stehenbleibt". Dazu muss der Eigenschaft background attachment der Wert fixed mitgegeben werden. Wird hier keine Angabe gemacht oder der Wert scroll eingesetzt, so bedeutet das, dass das Hintergrundbild "mitläuft".
Beispiel
(Festgesetzter Hintergrund )
Auch hierzu einmal zwei Beispiele: Im ersten Beispiel definiere ich einen scrollbaren container, dem ich ein Hintergrundbild zuweise, welches "mitläuft".
div.mitlaufen { background-image:url(hintergrund1.jpg); }
Und hier im zweiten Beispielbleibt das Hintergrundbild "wasserzeichenartig" fest stehen.
div.wasserzeichen { background-image:url(hintergrund1.jpg); background-attachment:fixed;}
So, das war es erst einmal zum Thema "Hintergründe". Wie wir dieses Wissen nun auf verschiedene "Boxen" anwenden können, davon erzählt dann ...