Farben und Hintergründe

color

Mit der Eigenschaft color bestimmen Sie die Vordergrundfarbe des Textinhaltes eines Elementes, also die Schriftfarbe. Der Initialwert, also welche Farbe die Elemente standardmäßig haben, ist browserabhängig.

<Farbe>
inherit

background-color

Mit der Eigenschaft background-color bestimmen Sie die Hintergrundfarbe eines Elementes.

transparent
<Farbe>
inherit

Die Eigenschaften color und background-color sollten Sie immer zusammen angeben. So vermeiden Sie Probleme. Angenommen, Sie deklarieren für ein Element eine Hintergrundfarbe, die in Ton und Helligkeit der Farbe ähnelt, die ein Besucher Ihrer Seite in seinem Browser für die Vordergrundfarbe eingestellt hat. Der Nutzer würde dann nichts mehr lesen können. Daher sollten Sie immer kontrastierende Vorder- und Hintergrundfarben zusammen deklarieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>'color' und 'background-color'</title>
<style type="text/css">
body {
   color: black;
   background-color: yellow;
   text-align: center;
   font-size: 3em;
}
</style>
</head>

<body>

<p>Olé, hier kommt der BVB!</p>

</body>
</html>

Beispieldokument ansehen

background-image

Mit der Eigenschaft background-image deklarieren Sie das Hintergrundbild eines Elementes.

Dabei sollten Sie zusätzlich immer eine Hintergrundfarbe im Grundton des Bildes mit angeben, um extreme Kontraste zwischen dem Zustand vor und nach Laden der Grafik zu vermeiden.

none
<URI>
inherit

Ein Beispiel:

body {
   color: black;
   background-color: #fffff6;
   background-image: url(/background.jpg);
}

background-repeat

Mit der Eigenschaft background-repeat bestimmen Sie, ob und in welcher Richtung das Hintergrundbild wiederholt werden soll.

repeat: Das Hintergrundbild wird in x-Richtung (horizontal) und in y-Richtung (vertikal) wiederholt.
repeat-x: Das Hintergrundbild wird nur in x-Richtung wiederholt.
repeat-y: Das Hintergrundbild wird nur in y-Richtung wiederholt.
no-repeat: Das Hintergrundbild wird nicht wiederholt, sondern nur ein Mal eingefügt.
inherit

background-attachment

Mit der Eigenschaft background-attachment können Sie angeben, ob ein Hintergrundbild mit der Seite mitscrollen oder auf der Stelle stehen bleiben soll.

scroll: Das Hintergrundbild scrollt mit der Seite mit
fixed: Das Hintergrundbild bleibt beim Scrollen der Seite auf der Stelle stehen. Dieses Verhalten ist auch als "Wasserzeicheneffekt" bekannt.
inherit

background-position

Mit der Eigenschaft background-position bestimmen Sie die Position des Hintergrundbildes auf der Seite.

<Prozent>
<Länge>
top, center oder bottom zusammen mit left, center oder right
inherit

Mit Prozent- oder Längenangaben geben Sie den genauen Abstand des Bildes zur linken oberen Ecke des Fensters. Ein Beispiel:

body {
   color: black;
   background-color: #fffff6;
   background-image: url(background.jpg);
   background-repeat: no-repeat;
   background-position: 50% 25%;
}

Der erste Wert entspricht der horizontalen Position, der zweite Wert der vertikalen. Geben Sie nur einen Wert an, wird lediglich die horizontale Position bestimmt, die vertikale entspricht dem Wert 50%. Die Werte top und left entsprechen der Position 0%, center entspricht 50%, right und bottom entsprechen 100%. Ein Bild, das zum Beispiel in der rechten unteren Ecke des Fensters platziert werden soll, entspricht entweder 100% 100%, bottom right oder right bottom. Der Initialwert ist 0% 0%.

background

Mit der Eigenschaft background können Sie sämtliche background-*-Eigenschaften zusammenfassen. Die Reihenfolge ist dabei gleichgültig. Das vorherige Beispiel können Sie also wie folgt schreiben:

body {
   color: black;
   background: #fffff6 url(background.jpg) no-repeat 50% 25%;
}

Für diese so genannten shorthand properties gibt es keine Initialwerte.

Werte
Schriftformatierung
Zum Seitenanfang