CSS-Quiz: Farben und Hintergründe – Teil 2

Wie Prozentwerte ein Hintergrundbild positionieren

Bei der Position eines Hintergrundbildes bedeutet ein Prozentwert etwas anderes als sonst in CSS: Er ist kein Abstand von der Kante, sondern eine Ausrichtung zweier Punkte. Der Wert bezeichnet denselben Punkt im Bild und in der Box, und beide werden aufeinandergelegt. Fünfzig Prozent legt also die Bildmitte auf die Boxmitte, hundert Prozent die rechte Bildkante auf die rechte Boxkante.

Genau daraus folgt, dass ein Logo in der oberen rechten Ecke die Angabe für hundert Prozent waagerecht und null Prozent senkrecht bekommt – nicht einen Abstand. Und daraus folgt auch, warum die Rechnung mit Längen anders ausgeht: Eine Länge ist ein echter Abstand von der Kante der Box zur Kante des Bildes, und ein Bild, das breiter als die Box ist, ragt dann heraus.

Schlüsselwörter und Prozentwerte lassen sich mischen, Schlüsselwörter und Längen in CSS 2.1 nicht – eine Einschränkung, die später gefallen ist. Die Reihenfolge ist waagerecht vor senkrecht; steht nur ein Wert, gilt für den zweiten die Mitte.

Wiederholung, Verankerung und die bemalte Fläche

Die Wiederholung kennt vier Werte, und die Buchstaben in zwei davon bezeichnen die Achsen: waagerecht und senkrecht. Eine Wiederholung nur senkrecht ergibt einen Streifen, und wohin dieser Streifen fällt, entscheidet die Position – ein senkrecht wiederholtes Bild an der rechten Kante braucht also beides, die Wiederholungsachse und die Positionierung.

Die Verankerung hat den Ausgangswert, der das Bild mit dem Element rollen lässt. Der andere Wert von CSS 2.1 heftet es an den Anzeigebereich, sodass es beim Rollen stehen bleibt – die Grundlage aller Parallaxe-Effekte jener Zeit und auf berührungsempfindlichen Geräten bis heute unzuverlässig.

Bemalt wird in CSS 2.1 die Fläche bis zur Außenkante des Rahmens, während sich die Position an der Innenkante des Rahmens ausrichtet. Diese Asymmetrie ist der Grund für einige der überraschenderen Ergebnisse in diesem Kapitel; spätere Module haben beide Kanten getrennt einstellbar gemacht.

Farbnotationen von damals und heute

CSS 2.1 kennt vier Wege, eine Farbe anzugeben: einen Namen, die sechsstellige hexadezimale Form, ihre dreistellige Kurzform mit verdoppelten Stellen, und die Funktion mit drei Werten – dort entweder als Zahlen von 0 bis 255 oder als Prozentwerte. Mischen lassen sich Zahlen und Prozentwerte innerhalb einer Angabe nicht.

Später sind die Fassungen mit Alphakanal hinzugekommen sowie eine Notation über Farbton, Sättigung und Helligkeit, die zum Abstufen einer Palette deutlich handlicher ist: Eine hellere Variante derselben Farbe ist dort eine Änderung an einer Zahl, in der hexadezimalen Form eine Rechnung über drei Kanäle. Die hexadezimale Form gibt es inzwischen auch acht- und vierstellig, mit Alpha an der letzten Stelle.

Die jüngsten Ergänzungen arbeiten in Farbräumen, die über den klassischen hinausgehen, und erlauben es, Farben zu mischen und relativ zu einer anderen zu beschreiben. Für den Alltag bleibt die Empfehlung schlicht: eine Notation je Projekt, und bei Farbschemata die Form, in der sich abstufen lässt.

Wie oft eine Grafik gekachelt wird

Die Frage, wie oft ein Hintergrundbild erscheint, hat keine feste Antwort: Der Browser füllt die zu bemalende Fläche, und wie viele Kacheln das sind, hängt von Bildgröße und Fläche ab. Bei einer Wiederholung in beide Richtungen füllt er sie vollständig aus, wobei die Kachel an der Position beginnt und in beide Richtungen fortgesetzt wird – auch nach oben und links, was regelmäßig überrascht.

Bei einem Bild am Wurzelelement oder am Körper des Dokuments ist die Fläche zudem nicht die Box, sondern der gesamte Anzeigebereich: Der Hintergrund des Wurzelelements wird auf die Leinwand übertragen und deckt sie ganz ab, selbst wenn das Element viel kleiner ist. Genau deshalb füllt eine Hintergrundfarbe am Körper eine fast leere Seite vollständig.

Spätere Module haben zwei Werte ergänzt, die das Kacheln steuern: einer verkleinert die Kachel so, dass eine ganze Zahl von ihnen in die Fläche passt, der andere verteilt ganze Kacheln mit Abstand dazwischen. Beide lösen das alte Problem der angeschnittenen letzten Kachel, für das es in CSS 2.1 keine Antwort gab.

Die Kurzform für den Hintergrund setzt übrigens alle Einzeleigenschaften zugleich, auch die nicht genannten – und seit den späteren Modulen zusätzlich Größe, Ursprung und die bemalte Fläche. Wer eine davon vorher gesetzt hat und danach die Kurzform notiert, verliert sie. Der Vergleich Kurzform gegen Einzeleigenschaften geht die Fälle durch.