Websiteentwicklung: CSS: Farbe und Hintergrund

Zurück zu Farben | Hoch zu CSS | Vor zu Box-Modell

Bei visuellen Medien kann mit CSS die Farbe für den Vordergrund angegeben werden und auch die Gestaltung des Hintergrundes. Letzteres trifft jedenfalls für die Anwendung auf Formate wie (X)HTML zu, nicht für SVG, wo zwar auch Farbangaben gemacht werden, da es sich um ein graphisches Format handelt, allerdings deutlich detaillierter, als es für Formate wie (X)HTML notwendig ist, welche hauptsächlich für die Darstellung von Text gedacht sind.

Der Hintergrund - wo anwendbar - kann sowohl eine einfache Farbe sein als auch ein Bildhintergrund sein, welcher relativ zum Vordergrund angeordnet werden kann. Im Rahmen des Box-Modelles bezieht sich der Hintergrund nicht auf den Außenabstand, der transparent ist, sondern auf Inhalt, Innenabstand und Rahmen. Der Hintergrund des Wurzelelementes erstreckt sich allerdings immer über den gesamten Malbereich, wird also im gesamten Anzeigebereich sichtbar. Für (X)HTML-Dokumente gibt es aus historischen Gründen eine Ausnahme, dort gilt dies Verhalten auch für das Element body, für welches Autoren dann auch entsprechende Angaben machen sollen, eher als für das eigentliche Wurzelelement html. Ist der Hintergrund des Wurzelelementes bei (X)HTML nicht gesetzt oder transparent, so wird bei diesem Format das Verhalten für den Hintergrund von body für den gesamten Malbereich verwendet.

Für die Lesbarkeit von Text ist es natürlich wesentlich, dass geeignete Farben und Farbkombinationen gewählt werden - weißer Text auf weißem Grund ist nicht lesbar. Die physiologische Farbwahrnehmung kann individuell auch verschieden sein, wobei es auch größere Abweichungen von der durchschnittlichen Wahrnehmung gibt. Etwa fehlt einigen Menschen ein Farbrezeptortyp im Auge, woraus sich das Problem ergibt, dass weite Bereiche von rot von weiten Bereichen von grün nicht unterscheidbar sind. Bei anderen Personen können aber auch bei anderen Kombinationen Unterscheidungsprobleme auftreten. Bei den meisten Menschen hat das Augen jedenfalls Rezeptoren für rot, grün und blau und einen sehr empfindlichen zusätzlichen Rezeptortyp, der den gesamten Bereich abdeckt, also besonders bei wenig Licht noch Informationen liefern kann. Betrachtet man das Frequenzspektrum des Lichtes, so decken die Rezeptoren also den Bereich von rot bis blau ab, aber mit unterschiedlicher Empfindlichkeit bei unterschiedlichen Wellenlängen. Dabei handelt es sich im Wesentlichen um eine breite Empfindlichkeitskurve mit jeweils einem Maximum. Licht einer bestimmten Wellenlänge führt also bei den vier Rezeptortypen jeweils zu einer unterschiedlichen Intensität. Aus den Verhältnissen bestimmt das Gehirn dann eine Farbwahrnehmung. Diese ist allerdings nicht eindeutig der ursprünglichen Wellenlänge zuzuordnen. Jedenfalls ist es so möglich, mit Bildschirmen, die jeweils wieder pro Pixel aus drei unterschiedlichen Teilen bestehen, welche Licht jeweils unterschiedlicher Wellenlängenbereiche aussenden oder durchlassen für Auge und Gehirn einen Farbeindruck zu erzeugen. Daher reicht es auch aus, statt einer Wellenlänge drei Parameter anzugeben, um mit einem Ausgabegerät einen Farbeindruck zu vermitteln. Da allerdings die Rezeptoren bei verschiedenen Personen spektral leicht unterschiedlich empfindlich sein können, wobei es altersbedingt auch zu Verschiebungen kommen kann oder eben auch bei einigen Personen nur zwei statt drei Rezeptortypen vorhanden sind, die auf unterschiedliche Wellenlängenbereiche empfindlich sind, kann die Wahrnehmung und Unterscheidbarkeit von verschiedenen Farben somit variieren, egal, ob sie unterschiedlichen Wellenlängen entsprechen oder einer unterschiedlichen Wahrnehmung der Kombination von bunten Pixeln auf Bildschirmen.

Der Unterschied zwischen viel und wenig Intensität, also hell und dunkel ist allerdings zwangsläufig bei allen verfügbar, die etwas sehen können. Daher ist dunkle Schrift auf hellem Grund oder umgedreht, also ein hoher Intensitätskontrast unproblematischer als lediglich ein hoher Farbkontrast.

Daher sollten Farben und Helligkeiten immer in der Kombination von Vordergrund und Hintergrund mit gleicher Priorität und Spezifität zusammenpassen, um sicherzustellen, dass über die gesamte Kaskade gute Lesbarkeit gegeben ist.

Die genauen Werte für Farbangaben sind im Kapitel über Farben beschrieben.

Farbangabe - color

Die Farbe (des Vordergrundes, etwa der Schrift) wird über die Eigenschaft color angegeben.

Mögliche Werte sind die in CSS nutzbaren Farbangaben und das Schlüsselwort 'inherit'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Der Initialwert ist abhängig vom Darstellungsprogramm - zusammen mit einer geeigneten Angabe für den Hintergrund ergibt sich aus dieser Kombination jedenfalls eine lesbare Präsentation. Insbesondere können also Autoren nicht von einem bestimmten Initialwert ausgehen, sofern die Farbe festgelegt wird, sollte also auch der Hintergrund passend festgelegt werden, etwa mit der Eigenschaft background-color und umgedreht.

Beispiele:

p {
  color: #f00; /* rote Absätze */
  background-color: black /* mit schwarzem Hintergrund */
}
strong {
  color: #808; /* betonte Schrift in violett */
  background-color: #ffd  /* mit hellem Hintergrund */
}

Ein farbiger Absatz und eine andersfarbige Betonung etc.

div {
  padding: 1em; 
  background-color: black /* mit schwarzem Hintergrund */
}
p {
  padding: 1ex;
  border: 0.2ex solid rgba(255,255,255,0.7);
  color: rgba(255,200,100,0.8);
  background-color: rgba(0,200,50,0.5)
}
strong {
  padding: 1.5em;
  color: hsla(300,100%,90%,0.8);
  background-color: hsla(200,100%,70%,0.5)
}

Ein farbiger Absatz und eine andersfarbige Betonung etc.

Hintergrundfarbe - background-color

Mit der Eigenschaft background-color kann die Hintergrundfarbe angegeben werden. Der Wert ist eine Farbe oder eines der Schlüsselwörter 'transparent' oder 'inherit'. Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente und auf visuelle Medien. Der Initialwert ist 'transparent'.

Bei einem transparenten Hintergrund beim Wurzelelement hängt die Präsentation letztlich vom Format oder dem Darstellungsprogramm ab. Dies trifft auch zu, wenn das Dokument selbst, etwa mit dem Element object oder foreignObject, in ein anderes Dokument eingebettet wird. Ist dies ein SVG-Dokument, legt SVG genau fest, dass der sonstige vorherige Inhalt der Hintergrund ist, bei (X)HTML-Dokumenten und anderen Formaten, welche dies nicht festlegen, ist jedoch undefiniert, was als Hintergrund dient, also nicht zwangsläufig der Hintergrund oder der vorherige, dahinterliegende Inhalt des einbettenden Dokumentes.

Beispiel siehe Eigenschaft color.

Hintergrundbild - background-image

Mit der Eigenschaft background-image kann ein Hintergrundbild referenziert werden. Ähnlich wie bei der Hintergrundfarbe ist hierbei darauf zu achten, dass es bei der Kombination mit der Vordergrundfarbe color zu einer lesbaren Darstellung kommt. Da Bilder nicht zwangsläufig bei jedem Nutzer angezeigt werden, ist ebenfalls darauf zu achten, dass zusätzlich zum Hintergrundbild auch immer noch die Farbe des Hintergrundes festgelegt ist, dass der Inhalt mit der aktuellen Vordergrundfarbe auch noch gut lesbar bleibt, wenn das Hintergrundbild nicht angezeigt wird oder werden kann. Sind sowohl Hintergrundbild als auch Hintergrundfarbe angegeben, so verdecken nicht transparente Teile des Hintergrundbildes die dortige Hintergrundfarbe. Entsprechend verdecken nicht transparente Teile des Hintergrundes gegebenenfalls darunterliegende Inhalte oder Hintergründe von anderen Elementen, etwa den Vorfahren.

Mögliche Werte sind eines der Schlüsselwörter 'inherit' oder 'none' oder die Notation einer URI/IRI eines Bildes. Die Eigenschaft ist anwendbar für alle Elemente bei visuellen Medien. Die Eigenschaft wird nicht vererbt, der Initialwert ist 'none'.

Beim Wert 'none' wird kein Hintergrundbild verwendet. Die URI/IRI des gewünschten Hintergrundbildes wird wie folgt notiert: Der Wert beginnt mit ' url(' und endet mit ')'. Dazwischen steht die URI/IRI des Bildes, optional eingeschlossen in einfache oder doppelte Anführungszeichen. Zeichen in der URI/IRI, die mit der Notation von CSS in Konflikt geraten können, wie etwa Klammern oder Anführungszeichen, sind zu maskieren, dazu wird dem fraglichen Zeichen das Zeichen '\' vorangestellt.

Hat das Bild eine vorgegebene Größe (typisch bei Pixelgraphik), so wird diese zur Darstellung verwendet. Ist etwa bei bestimmten SVG-Bildern die Größe nur in Prozent angegeben, so richtet sich die Größe der Darstellung nach der Größe des Elementes, für welches das Bild als Hintergrundbild angegeben ist. Angaben im SVG-Bild über die Behandlung des Aspektverhältnisses können dann darüber entscheiden, in welcher Weise genau das Bild an die Größe des Elementes angepaßt wird.

Beispiel:

#inhalt {
  color: black;
  background-color: white;
  background-image: url('schneemann.svg')
}
#navigation {
  color: #555;
  background-color: #eee;
  background-image: url("schneetreiben.png")
}
h1 {
  color: #777;
  background-color: #eee;
  background-image: url(schneewehe.jpg)
}

Wiederholung des Hintergrundes - background-repeat

Ist das Bild kleiner als der für den Hintergrund vorgesehene Platz, kann festgelegt werden, ob und in welcher Richtung das Bild wiederholt werden soll. Gegebenenfalls wird der Hintergrund dann also mit dem Bild als wiederholte Kachel überdeckt.

Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Wert ist eines der folgenden Schlüsselwörter:

inherit

geerbt

repeat

Das Bild wird horizontal und vertikal wiederholt; der Initialwert

repeat-x

Das Bild wird horizontal wiederholt

repeat-y

Das Bild wird vertikal wiederholt

no-repeat

Das Bild wird nicht wiederholt, lediglich einmal dargestellt

Beispiel:

body {
  color: #cfd;
  background-color: #040;
  background-repeat: repeat-x;
  background-image: url('tropenbaeume07.svg')
}
#inhalt {
  background-repeat: no-repeat;
  background-image: url('orchidee03.svg')
}

Hintergrundverhalten - background-attachment

Mit der Eigenschaft background-attachment kann nun angegeben werden, ob sich das Hintergrundbild mitbewegen soll, wenn bei kontinuierlichen Medien ein Rollmechanismus eingesetzt wird - etwa ein Rollbalken bei der Darstellung auf einem Bildschirm.

Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Wert ist eines der folgenden Schlüsselwörter: 'inherit', 'scroll' oder 'fixed'. Der Initialwert ist 'scroll'.

Im Falle von 'fixed' ist das Bild relativ zum Anzeigebereich fixiert, rollt also nicht mit, wenn ein Rollmechanismus für den Anzeigebereich verwendet wird. Im Falle von 'scroll' bewegt sich das Bild mit dem umgebenden Block, wenn ein Rollmechanismus für den Anzeigebereich verwendet wird.

Dabei ist zu beachten, dass bedingt durch die Eigenschaft overflow nicht nur der Anzeigebereich selbst einen Rollmechanismus aufweisen kann, sondern auch andere Elemente. Die Eigenschaft bezieht sich allerdings immer auf den gesamten Anzeigebereich. Von daher fehlen hier in CSS also eigentlich Schlüsselwörter, um auch einen Bezug auf Elemente mit einem eigenen Rollmechanismus festlegen zu können. Das Problem wird voraussichtlich im entsprechenden Modul von CSS3 gelöst, wo es im aktuellen Arbeitsentwurf einen weiteren Wert 'local' gibt, mit welchem man angeben können wird, dass der Hintergrund relativ zum Inhalt seiner Box fixiert ist.

Beispiel:

body {
  color: #eef;
  background-color: #040;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url(passionsblume.jpg)
}

Hintergrundposition - background-position

Mit der Eigenschaft background-position kann die Position des Hintergrundbildes relativ zur Box angegeben werden, für welche das Hintergrundbild angegeben ist.

Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien. Der Wert ist entweder das Schlüsselwort 'inherit' oder eine Liste mit einem oder zwei Listenpunkten, die entweder je ein Schlüsselwort oder ein Prozentwerte oder eine Längen sind (beides auch negativ). Der Initialwert ist '0% 0%'.

Hat die Liste nur einen Listenpunkt, wird der zweite als das Schlüsselwort 'center' angenommen. Falls ein Listenpunkt kein Schlüsselwort ist, repräsentiert der erste Punkt die horizontale Position, der zweite die vertikale.

Bei der Angabe eines Prozentwertes wird zum einen die Position der Box für den Innenabstand (padding) verwendet, wobei 0% oben, beziehungsweis links ist und 100% unten, beziehungsweise rechts. Zum anderen wird entsprechend bei dem Bild diese relative Position bestimmt, also 0% oben, beziehungsweis links ist und 100% unten, beziehungsweise rechts. Das Bild wird dann so angeordnet, dass die so bestimmten Punkte zur Deckung gebracht werden. '0% 0%' entspricht also einer Situation, wo das Bild mit seiner linken oberen Ecke in der linken oberen Ecke der Box des Innenabstandes positioniert ist. Bei '100% 100%' ist gerade die rechte untere Ecke des Bildes in der rechten unteren Ecke der Box des Innenabstandes angeordnet.

Bei einer Längenangabe bezieht sich diese immer auf die Box des Innenabstandes. Die linke obere Ecke des Bildes wird dann an der so bestimmten Position angeordnet. Bei einer Angabe von '2em 3em' befindet sich also die linke obere Ecke des Bildes 2em entfernt von der linken Seite der Box des Innenabstandes und 3em von der oberen Seite.

Einige Prozentwerte können alternativ auch durch Schlüsselwörter ausgedrückt werden. 'top' entspricht 0% der vertikalen Position. 'bottom' entspricht 100% der vertikalen Position. 'left' entspricht 0% der horizontalen Position. 'right' entspricht 100% der horizontalen Position. 'center' ist etwas kniffliger. Sofern nichts anderes für die horizontale Position angegeben ist, entspricht das horizontal 50%. Falls etwas für die horizontale Position angegeben ist, entspricht 'center' 50% der vertikalen Position.

Die Position ist undefiniert, falls das Bild ein festgelegtes Aspektverhältnis hat, aber keine festgelegte Größe.

Beispiel:

body {
  color: black;
  background-color: white;
  background-attachment: fixed;
  background-image: url(knitterpapier01.png);
  background-position: center
}

In diesem Falle wird das Bild also innerhalb des Anzeigebereiches zentriert und fixiert angezeigt. Ausgehend vom zentrierten Bild wird zudem der gesamte Hintergrund des Anzeigebereiches gekachelt.

Kurznotation Hintergrund - background

Die Angaben zum Hintergrund können zudem in einer Kurznotation mit der Eigenschaft background zusammengefaßt werden. Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Der Wert ist entweder 'inherit' oder eine Liste mit den Werten der Einzeleigenschaften für den Hintergrund, die in beliebiger Reihenfolge notiert werden können, wobei auch noch jede Angabe optional ist, es ist allerdings mindestens eine als Wert anzugeben. Der Initialwert entspricht dem der jeweiligen Einzelwerte, was dann auch bedeutet, dass nicht gesetzte Einzeleigenschaften durch die Angabe von background auf den Initialwert gesetzt werden.

Beispiele:

body {
  color: black;
  background: white fixed url(knitterpapier01.png) center
}

body {
  color: #eef;
  background: #040 no-repeat fixed url(passionsblume.jpg)
}

Eine Spezialregel gibt es, wenn ein Wert in der Liste beim Darstellungsprogramm nicht implementiert sein sollte. Problematisch war früher insbesondere 'fixed' für das Verhalten. Wenn eine Angabe nicht umgesetzt werden kann, soll die gesamte Angabe ignoriert werden. So kann man etwa statt des vorherigen Beispiels notieren:

body {
  color: #eef;
  background: #040 url(dschungel.jpg);
  background: #040 no-repeat fixed center url(passionsblume.jpg)
}

Kann das Darstellungsprogramm 'fixed' nicht umsetzen, wird also der Hintergrund mit dem Dschungelbild gekachelt. Ist die Umsetzung implementiert, so wird die Passionsblume zentriert und nicht wiederholt.

Zurück zu Farben | Hoch zu CSS | Vor zu Box-Modell