Erklärung:
Verändert die Hintergrundfarbe des Textes. Gut um einen Textabschnitt hervorzuheben.

Werte:
Die selben wie bei "color".

Beispiel:

P {
  background-color: #f00;
}

Erklärung:
Bestimmt die Farbe des HTML-Tags.

Werte:
Am besten geben Sie die Farbwerte hexadezimalen ein. Am Beispiel unten ist es ganz einfach darzustellen: die ersten beiden Zeichen nach der Raute stehen für den Rot-Anteil, die dritte und vierte Ziffer für den Grün-Anteil und die letzten beiden für den Blau-Anteil. Entweder Sie suchen sich einen HTML-Editor wie Ulli Meybohm's HTML Editor in dem ein Feature integriert ist das es erlaubt Farben hexadezimal einzufügen oder Sie holen sich eines der vielen anderen Tools.

Beispiel:

P {
  color: #f00;
}

Zu beachten:
Um Speicher und die Leitung zu schonen können Sie die hexadezimalen Auszeichnungen verkürzen. Die Browser nehmen bei nur drei Stellen nach der Raute jeden Wert doppelt. Aus #ff0000 können Sie #f00 machen. Übrigens ist es empfehlenswert die Buchstaben klein zu schreiben um schon mal vorsorglich ein bißchen XHTML anzuwenden und um bei Komprimierung bessere Ergebnisse zu erziehlen.

Erklärung:
Bestimmt die Hintergrundfarbe des Elements.

Werte:

• Farbe: Die gleichen wie in color
• transparent: lässt das darunterliegende Element durchscheinen

Beispiel:

BODY {
     background-color: #00f;
}

Erklärung:
Weist dem Hintergrund ein Bild zu. Um die Grafik Ihrer Wahl einzubinden, müssen Sie nur den relativen Pfad in der Klammer in Ihren Wunschpfad umändern.

Beispiel:

BODY {
     background-image: url(.. /bilder/hintergrund.gif);
}

Erklärung:
Dieses Tag geht Hand in Hand mit der background-image-Eigenschaft. Es legt fest ob das Bild mit der Seite gescrollt werden soll oder ob es fixiert.

Werte:

• fixed: verhindert das mitscrollen des Hintergrundbildes
• scroll: lässt das Hintergrundbild mitscrollen. Voreinstellung

Beispiel:

BODY {
     background-image: url(hintergrund.png);
     background-attachment: fixed;
}

Zu beachten:
Netscape 4.x zeigt das Hintergrundbild immer an, als wäre das Attribut scroll, es wird also mehrmals hintereinander angezeigt.

Erklärung:
Legt fest ob und wie das Hintergrundbild wiederholt wird, falls es kleiner als der Bildschirm ist.

Werte:

• repeat-x: Wiederholt das Bild in der X-Achse (nach rechts)
• repeat-y: Wiederholt das Bild in der Y-Achse (nacht unten)
• no-repeat: Wiederholt das Bild nicht

Beispiel:

BODY {
     background-image: url(hintergrund.png);
     background-repeat: repeat-x;
}

Erklärung:
Gibt die Position an, an der das Hintergrundbild angezeigt wird.

Werte:

Es sollten immer zwei Variablen angegeben werden. Die Erste bestimmte den Abstand von links, die Zweite den von oben. Der Abstand von links wird mit den Variablen left (links, Voreinstellung), center (mitte) und right rechts eingestellt. Die Variablen top (oben), center (mitte) und bottom (unten) bewirken die vertikale Ausrichtung. Auch die prozentuale Ausrichtung ist möglich. 50% 0% würde bewirken, dass Bild oben in der Mitte angezeigt wird. Ein paar Beispiele:

• right center = 100% 50%: rechts und in der Mitte (vertikal) des Bildschirms
• center bottom = 50% 100%: in der Mitte (horizontal) und unten

Sie können die Bilder auch pixelgenau (absolut) Positionieren. 10px 50px bewirkt 10 Pixel von links und 50 Pixel von oben.

Beispiel:

BODY {
     background-image: url(hintergrund.png);
     background-position: right bottom;
     background-repeat: no-repeat;
}

Zu beachten:
Netscape 4.x zeigt das Hintergrundbild immer oben links an.

Erklärung:
Kurzschreibweise für alle bisher erklärten background-Eigenschaften.

Werte:
Alle bisher vorgestellten.

• url(../bilder/hintergrund.png): Bindet ein Hintergrundbild ein background-image
• #0000ff: Hintergrundfarbe background-color
• fixed/scroll: Feststehend oder mitscrollendes Bild background-attachment
• repeat-x/repeat-y/no-repeat: Legt fest wie das Bild wiederholt wird background-repeat
• left/center/right top/center/bottom: Positioniert das Bild background-position

Beispiel:

BODY {
     background: #00f url(bilder/hintergrund.png) fixed repeat-y right;
}

Zu beachten:
Netscape positioniert das obige Beispiel natürlich nicht korrekt. Auch sehen Sie, dass ich nur ein Attribut für die Positionierung verwendet habe. Das ist richtig, denn repeat-y rendert das Bild von oben an.