background Kurzform vs Einzeleigenschaften: color, image, position, repeat

Was die Kurzform setzt

background: #F3ECFA url(bild.gif) no-repeat 8px 8px setzt Farbe, Bild, Wiederholung und Position – und background-attachment auf scroll, weil es fehlt. Mit CSS 3 kamen background-size (in der Kurzform nach der Position mit Schrägstrich: 8px 8px / 16px), background-origin und background-clip dazu; auch sie werden zurückgesetzt.

Die Falle: background: none

background: none entfernt nicht nur das Bild, sondern setzt auch die Farbe auf transparent. Wer nur das Bild loswerden will, schreibt background-image: none. Umgekehrt löscht background: white ein gesetztes Bild.

Mehrere Hintergründe

Seit CSS 3 nimmt background mehrere, durch Komma getrennte Schichten; die erste liegt oben. Die Farbe darf nur in der letzten Schicht stehen. Die Einzeleigenschaften nehmen dann ebenfalls Listen – background-repeat: no-repeat, repeat-x gilt Schicht für Schicht.

Position ohne Bild bleibt wirkungslos

Die Einzeleigenschaften background-position, background-repeat und background-attachment beschreiben allesamt ein Bild. Ohne background-image haben sie keinen sichtbaren Effekt – sie sind gesetzt, aber es gibt nichts zu positionieren. Das erklärt eine häufige Verwirrung: Eine Position, die in der Entwicklerkonsole korrekt dasteht, tut trotzdem nichts, weil weiter oben im Stylesheet eine Kurzform das Bild zurückgesetzt hat. In CSS 2.1 fasst die Kurzform genau fünf Eigenschaften zusammen.

Wo der Hintergrund anfängt und wo er aufhört

CSS 2.1 kennt eine Regel, die viele überrascht: Der Hintergrund einer Box reicht unter den Rahmen hindurch bis zu dessen Außenkante. Sichtbar wird das erst bei einem gestrichelten oder gepunkteten Rahmen – in den Lücken scheint nicht der Hintergrund des Elternelements durch, sondern der eigene. Wer einen gestrichelten Rahmen auf hellem Grund über einer dunklen Box zeichnet, sieht deshalb dunkle Lücken statt heller.

Spätere Module haben das steuerbar gemacht: Eine Eigenschaft bestimmt, bis zu welcher Kante die Hintergrundfarbe gemalt wird, eine zweite, an welcher Kante die Positionierung eines Hintergrundbildes beginnt. Damit lässt sich ein Bild am Inhalt ausrichten statt am Innenabstand, oder eine Farbe am Innenabstand enden lassen statt am Rahmen. Beide sind Bestandteile der heutigen Kurzform und werden von ihr zurückgesetzt – ein weiterer Grund, die Kurzform als vollständige Neudefinition zu behandeln und nicht als Ergänzung.

Hintergründe im Druck und im Kontrast

Browser drucken Hintergründe standardmäßig nicht. Das spart Toner und ist meistens richtig, hat aber eine Folge, die sich im Entwurf leicht übersehen lässt: Alles, was seine Bedeutung allein aus der Hintergrundfarbe bezieht, verschwindet auf dem Papier. Ein Kasten mit einer Warnung, der sich nur durch seinen roten Grund von einem gewöhnlichen Absatz unterscheidet, ist gedruckt ein gewöhnlicher Absatz.

Die Abhilfe ist keine Eigenschaft, sondern ein Entwurfsgrundsatz: Was unterscheidbar bleiben muss, bekommt zusätzlich einen Rahmen, eine Beschriftung oder einen Wechsel im Schriftschnitt. Dasselbe gilt für die Darstellung mit erzwungenen Farben, in der das System Hintergründe durch eigene ersetzt, und für Leser mit einer Farbsehschwäche, für die zwei Hintergrundfarben dieselbe sein können. Ein Hintergrundbild als reine Dekoration braucht dagegen keine Rücksicht – aber dann gehört auch keine Bedeutung hinein, die anderswo fehlt.

Wie groß ein Hintergrundbild wird

CSS 2.1 kennt keine Möglichkeit, die Größe eines Hintergrundbildes zu bestimmen – es erscheint in seinen eigenen Abmessungen. Alles, was danach kam, hängt an einer einzigen Eigenschaft, und die ist heute Bestandteil der Kurzform. Sie nimmt zwei Längen, einen Prozentwert oder eines von zwei Schlüsselwörtern entgegen: Das eine passt das Bild so ein, dass es vollständig sichtbar ist und möglicherweise Rand frei bleibt, das andere füllt die Fläche vollständig und schneidet den Überschuss ab.

In der Kurzform steht die Größe hinter der Position, getrennt durch einen Schrägstrich – eine Schreibweise, die sonst nirgends vorkommt und deshalb leicht vergessen wird. Ohne Position davor ist die Größe nicht notierbar. Das ist ein weiterer Grund, warum die Kurzform bei zusammengesetzten Hintergründen schnell unübersichtlich wird und die Einzeleigenschaften dort vorzuziehen sind: Sechs durch Kommas getrennte Listen in einer Zeile liest niemand mehr, sechs untereinander stehende Deklarationen schon.

Wann welches

• Vollständigen Hintergrund definieren, alte Werte sicher löschen: Kurzform.
• Nur einen Aspekt ändern – etwa die Position beim Schweben: Einzeleigenschaft.
• Bild entfernen, Farbe behalten: background-image: none, niemals background: none.

Kurz gesagt: Die Kurzform ist ein Reset mit Inhalt, die Einzeleigenschaft eine gezielte Änderung. Wer beides im selben Stylesheet mischt, schreibt die Kurzform zuerst und die Einzeleigenschaften danach – umgekehrt löscht die Kurzform, was davor stand.

Häufige Fragen