Hintergrundfarbe und -bild

Du rufst eine Seite auf, oben ein Hero mit weißer Überschrift und einem Foto dahinter. Ein paar Sekunden lang steht da weißer Text auf weißem Grund, denn das Bild lädt noch. Hintergründe sehen einfach aus und haben ein paar solcher Stellen. Nebenbei sieht man an ihnen genauer als an allem anderen, wie das Box-Modell aus Abschnitt 4 gebaut ist.

01 / 05Der Hintergrund hört am Rahmen auf

<div class="huelle">
  <div class="kasten viel-innen">Viel innen, wenig außen</div>
  <div class="kasten viel-aussen">Wenig innen, viel außen</div>
</div>

.huelle {
  background-color: #ffffff;
  font-family: system-ui, sans-serif;
}

.kasten {
  background-color: #fef9c3;
  /* Gestrichelt, damit du den Hintergrund
     durch die Lücken schimmern siehst. */
  border: 8px dashed #a16207;
}

/* Beide Kästen brauchen zusammen gleich viel Platz.
   Gefärbt ist trotzdem völlig unterschiedlich viel. */
.viel-innen {
  padding: 32px;
  margin: 8px;
}

.viel-aussen {
  padding: 8px;
  margin: 32px;
}

Die Farbe reicht unter den Inhalt, unter den Innenabstand und unter den Rahmen. Unter den Außenabstand reicht sie nicht.

Beide Kästen im Beispiel brauchen gleich viel Platz, einmal 32 Pixel innen und 8 außen, einmal umgekehrt. Die gefärbte Fläche ist trotzdem völlig verschieden groß.

Mehr Farbe kommt also über padding, mehr Abstand über margin. Wer die beiden verwechselt, wundert sich über klobige Karten oder über zwei Kästen, die einfach nicht auseinandergehen wollen.

Der Rahmen ist der Fall dazwischen. Ein gestrichelter Rahmen ist nicht dicht, und durch seine Lücken schimmert der Hintergrund. Deshalb ist er im Beispiel gestrichelt, sonst müsstest du mir glauben, dass die Farbe wirklich bis unter den Rahmen läuft.

Mit dem Inspector kannst du das nachrechnen, und zwar bei der Breite, mit der die Spalte startet. Am oberen Kasten steht 348 × 99 bei padding: 32px und margin: 8px, am unteren 300 × 51 bei padding: 8px und margin: 32px. Die Zahl oben ist die gefärbte Fläche. Mit dem Außenabstand brauchen beide dieselben 364 Pixel, 348 plus zweimal 8 und 300 plus zweimal 32.

Gleicher Platz, verschieden viel Farbe. Die vier Bänder über der Seite zeigen dieselbe Aufteilung als Bild, und das äußerste davon, der Außenabstand, liegt bei beiden außerhalb des Gelben.

02 / 05Ein Bild als Hintergrund

<section class="banner">
  <h2>Tipptrainer</h2>
  <p>Zehnfinger im Browser, ohne Anmeldung.</p>
</section>

<div class="leer"></div>

.banner {
  font-family: system-ui, sans-serif;
  color: #ffffff;
  padding: 24px;

  /* Die Farbe liegt unter dem Bild und wird überall
     dort sichtbar, wo das Bild nicht hinreicht. */
  background-color: #7f1d1d;
  background-image: url("/lernen/media/demo-600.jpg");
  background-repeat: no-repeat;

  /* Ohne Höhe bliebe der Kasten so hoch wie sein Text. */
  min-height: 200px;
}

/* Derselbe Hintergrund, aber ohne Inhalt und ohne Höhe.
   Ein Hintergrundbild bringt keine eigene Größe mit,
   also ist dieser Kasten null Pixel hoch. */
.leer {
  background-image: url("/lernen/media/demo-600.jpg");
}

background-image nimmt die Adresse in url(). Die Anführungszeichen darin darfst du weglassen. Sie ersparen dir aber Ärger, sobald ein Leerzeichen oder eine Klammer im Dateinamen steht. Von Haus aus wiederholt sich ein Hintergrundbild, bis die Fläche voll ist.

Ein relativer Pfad wird dabei nicht von der HTML-Datei aus aufgelöst, sondern vom Stylesheet aus. Liegt deine styles.css in einem Unterordner, zeigt url("bilder/foto.jpg") in diesen Unterordner hinein und nicht dorthin, wo die Seite liegt. Mit einem absoluten Pfad wie im Beispiel stellt sich die Frage gar nicht erst.

Wichtiger ist der zweite Kasten. Darin steckt dasselbe Bild, und trotzdem siehst du nichts, denn der Kasten ist leer. Ein Hintergrundbild bringt keine Größe mit. Es färbt eine Fläche ein, die es nicht selbst erzeugt. Ein leerer div mit dem schönsten Foto dahinter ist also genau null Pixel hoch. Deshalb steht in fast jeder Hero-Regel eine Höhe, meistens als min-height.

03 / 05Mehrere Bilder übereinander

background-image nimmt auch eine Liste, kommagetrennt. Jeder Eintrag ist eine eigene Ebene.

Die Reihenfolge wirkt beim ersten Lesen verkehrt herum, denn das erste Bild in der Liste liegt oben. Hängst du nachträglich eine Ebene hinten an, liegt sie unter allem anderen. Dann wunderst du dich, warum sich nichts ändert.

Verläufe gehören auch dazu. Für CSS ist ein Verlauf ein Bild und keine Farbe. Das übliche Rezept für lesbaren Text auf einem Foto ist ein Verlauf oben und das Foto darunter. Wie so ein Verlauf gebaut wird, kommt in der nächsten Lektion, und in Lektion 7.5 setzt du beides zusammen.

04 / 05Warum unter jedes Bild eine Farbe gehört

<section class="hero ohne-farbe">
  <h2>Ohne Ersatzfarbe</h2>
  <p>Diese beiden Zeilen sind weiß auf Weiß.</p>
</section>

<section class="hero mit-farbe">
  <h2>Mit Ersatzfarbe</h2>
  <p>Dieselben zwei Zeilen, lesbar geblieben.</p>
</section>

.hero {
  font-family: system-ui, sans-serif;
  color: #ffffff;
  padding: 24px;
  min-height: 120px;
  margin-bottom: 16px;

  /* Diese Adresse gibt es nicht. So sieht eine Seite
     auch aus, solange das Bild noch lädt. */
  background-image: url("bild-kommt-nicht.jpg");
}

.ohne-farbe {
  background-color: transparent;
}

.mit-farbe {
  background-color: #18181b;
}

background-color und background-image schließen sich nicht aus. Die Farbe liegt unter allen Bildebenen und wird überall dort sichtbar, wo kein Bild hinreicht.

Ob eine Datei wirklich angekommen ist, steht im Reiter „Netzwerk“. Beim Banner weiter oben steht dort neben index.html und styles.css eine dritte Zeile, /lernen/media/demo-600.jpg, und die ist als geladen vermerkt. Bei diesem Beispiel steht an derselben Stelle /bild-kommt-nicht.jpg, daneben in Rot „fehlgeschlagen“. Auch die Zahl am Reiter ist rot. Die siehst du sogar, ohne den Reiter zu öffnen, und schneller findest du einen vertippten Pfad nicht.

Die Ersatzfarbe ist kein Schönheitsthema. Auf einer mäßigen Verbindung dauert es mehrere Sekunden, bis ein großes Bild geladen ist, und die Seite steht in dieser Zeit schon da. Steht dort weißer Text auf einem Hero ohne Ersatzfarbe, ist die Überschrift so lange schlicht nicht da. Kommt das Bild gar nicht, bleibt sie weg.

Die Ersatzfarbe hat deshalb ungefähr die Helligkeit des Bildes, bei einem dunklen Foto mit hellem Text also ein dunkles Grau und nicht Weiß.

05 / 05Hintergrundbild gegen img

Eigentlich kommt diese Entscheidung vor allen anderen. Ein Hintergrundbild ist Dekoration. Es steht nicht im Dokument und hat keinen Alternativtext. Screenreader erwähnen es nicht, und für eine Suchmaschine ist es kein Inhalt.

Für ein Produktfoto, ein Diagramm oder ein Portrait ist das die falsche Wahl. Solche Bilder gehören als <img> ins HTML.

Für die Fläche hinter einer Überschrift, ein Muster oder einen Verlauf ist es richtig. Ich frage mich dabei, ob jemand etwas vermissen würde, wenn das Bild fehlt. Wenn ja, gehört es ins HTML, wenn nicht, ist es Hintergrund.

In der Aufgabe bekommt der Hero des Portfolios sein Bild und die Farbe darunter.