Grundlagen: Schriftfarben, Hintergrundfarben und Hintergrundbilder mit CSS

Bevor wir uns damit beschäftigen, wie man denn die Schrift oder den Hintergrund eines Objekts färbt, müssen wir uns erst einmal anschauen, wie man die gewünschte Farbe angibt. Dafür gibt es diverse Möglichkeiten. Ich werde hier vier an der Zahl nennen.

Angabe von Farben:
Zunächst können wir die Farbe über ihren Namen bestimmen (auf Englisch!). Man findet sicherlich sehr viele ausführliche Listen wenn man bei Google danach sucht. Von dieser Methode würde ich jedoch abraten, da verschiedene Browser die Farben unterschiedlich darstellen könnten oder schlicht und einfach nicht kennen.

<p style="background-color: red;">Text mit rotem Hintergrund</p>

Eine weitere Möglichkeit ist die Angabe der genauen RotGrünBlau-Werte. Die geringste Farbintensität ist dem Wert 0 zugeordnet, die höchste ist 255.

<p style="background-color: rgb(255,0,0)">Text mit rotem Hintergrund</p>

Am Häufigsten benutzt wid wohl die Farbangabe über Hexadezimalzahlen. Auch hier werden eigentlich nur RGB-Werte übergeben (In der Form von #RRGGBB oder der Kurzschreibweise #RGB).

<p style="background-color: #FF0000;">Text mit rotem Hintergrund</p>

Zu guter Letzt können wir auch die Angaben vom übergeordnetem Objekt nehmen, mit inherit (erben):

<p style="background-color: inherit;">Text mit rotem Hintergrund</p><strong>
</strong>

Schriftfarben:
Um dem Text eines Objektes eine bestimmte Farbe zuzuordnen gibt man diesem die Eigenschaft color. Angeben können wir auch diese Farbe über alle oben bereits genannten Möglichkeiten.

Ein Beispiel:

<p style="color: #FF0000">Roter Text</p>

Mit einem Muster oder Bild kann Texte noch nicht ausfüllen. Gibt man eine Farbe an sollte man auch immer eine Hintergrundfarbe angeben. Der Validator würde zwar keinen Fehler, aber eine Warnung ausgeben.

Hintergrundfarbe:
Wenn wir einem Objekt eine bestimmte Hintergrundfarbe geben möchten, verwenden wir die Eigenschaft background-color. Angeben können wir diese über die drei uns bekannten Möglichkeiten. Zusätzlich haben wir die Wahl den Wert transparent anzugeben. Somit bleibt der Hintergrund durchsichtig und man sieht die Farbe des darunterliegenden Objektes.

<p style="background-color: #0000FF; color: #FF0000;">Roter Text auf blauem Hintergrund</p>

Hintergrundbilder:
Für Hintergrundbilder gibt es mehrere Eigenschaften. Fangen wir mit dem Wichtigstem an, der Angabe eines Hintergrundbildes. Für die Angabe verwenden wir background-image. Als Werte können wir eine URI angeben (absolut oder relativ zum Pfad der Datei in der sich der CSS-Code befindet). Zudem noch none für keinen Hintergrund oder inherit für das Hintergrundbild des übergeordneten Objektes.

<p style="background-image: url('http://www.webstylez.net/images/8/header.gif');">Text mit Hintergrundbild</p>

Zudem sollte man bei der Angabe eines Hintergrundbildes auch davor immer noch eine Hintergrundfarbe angeben, falls das Bild nicht geladen werden kann.

Grundsätzlich wiederholen sich Hintergrundbilder solange bis die gesamte Fläche mit dem Bild ausgefüllt ist. Um diese Wiederholung zu steuern gibt es die Eigenschaft background-repeat. Angeben kann man no-repeat, repeat-x und repeat-y.

Bei dem Wert no-repeat würde das Bild nur einmal angezeigt. Die obere linke Ecke des Bildes würde in der oberen linken Ecke des Objektes sein.
Gibt man repeat-x an wird das Bild solange in horizontaler Richtung (auf der X-Achse) wiederholt bis die gesamte Fläche des Objektes gefüllt ist.
repeat-y verhält sich ähnlich wie repeat-x, bloß dass das Bild in der Vertikalen (Y-Achse) wiederholt wird.

<p style="background-image: url('http://www.webstylez.net/images/8/header.gif'); background-repeat: no-repeat;">Text mit Hintergrundbild welches nicht wiederholt wird.</p>

Sind die Bilder für den Hintergrund zu klein und werden nicht wiederholt, werden sie standardmäßig in der oberen linken Ecke positioniert. Um diese zu ändern können wir die background-position angeben. Es ist Möglich einen Wert anzugeben. So legt dieser die X-Position des Bildes fest. Vertikal liegt es dann mittig.

Gibt man noch einen zweiten Wert an, so wirkt sich dieser auf die Y-Position an. Möglich sind die Angaben über Prozente, Längenangaben (bei beiden sind positive oder negative Werte erlaubt) oder über Schlüsselwörter (top, right, bottom, left und center). Hierbei kann man auch eine Prozent- und eine Längenangabe machen.

<p style="background-image: url('http://www.webstylez.net/images/8/header.gif'); background-repeat: no-repeat; background-position: center left;">Text mit Hintergrundbild welches nicht wiederholt wird.</p>

Zu beachten ist noch, dass die Längenangaben vom Rand des Padding-Bereichs gemessen werden.

Zu guter Letzt gibt es noch das background-attachment. Mit dieser Angabe kann man bestimmen, wie sich das Hintergrundbild beim scrollen verhält. Angeben kann man fixed, scroll und inherit.

Die Angabe fixed sorgt dafür, dass das Hintergrundbild beim scrollen stehen bleibt. Hat man es zum Beispiel direkt mittig in den Hintergrund gesetzt, dann bleibt es dort auch.
Gibt man jedoch scroll an bleibt das Hintergrundbild stehen wo es eingesetzt wird und folgt dem Betrachter der Seite nicht.
inherit wird die Eigenschaft vom übergeordnetem Element übernehmen.

<p style="background-image: url('http://www.webstylez.net/images/8/header.gif'); background-repeat: no-repeat; background-position: center left; background-attachment: fixed;">Text mit Hintergrundbild welches nicht wiederholt wird.</p>

Mit diesem Tutorial wollte ich Einsteigern eine einfache Einführung anbieten - ich hoffe das ist mir gelungen.