Größe, Position und Verläufe

Ein Hintergrundbild sitzt nach dem Einbinden fast nie da, wo es hingehört. Es ist zu groß, es kachelt, oder du siehst genau die Ecke, die niemanden interessiert. Drei Eigenschaften bringen es in Form.

01 / 04Wie groß das Bild wird

<div class="feld cover">cover</div>
<div class="feld contain">contain</div>
<div class="feld fest">240px 120px</div>

.feld {
  height: 140px;
  margin-bottom: 12px;
  padding: 8px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
  background-color: #3f3f46;
  background-image: url("/lernen/media/hero-1600.jpg");
  background-repeat: no-repeat;
}

/* Füllt die Fläche ganz und schneidet ab, was nicht passt. */
.cover {
  background-size: cover;
}

/* Passt das ganze Bild hinein und lässt Rand stehen.
   Ohne no-repeat oben würde dieser Rand gekachelt. */
.contain {
  background-size: contain;
}

/* Zwei Längen verzerren, weil beide Achsen fest sind. */
.fest {
  background-size: 240px 120px;
}

background-size kennt zwei Schlüsselwörter und beliebige Längen.

• cover vergrößert das Bild so weit, dass die Fläche vollständig bedeckt ist. Was über die Kanten hinausragt, wird abgeschnitten. Das Seitenverhältnis bleibt erhalten. Für Heroes und Karten ist das der Normalfall.
• contain macht das Gegenteil und verkleinert so weit, dass das ganze Bild sichtbar ist. Dabei bleibt rechts oder unten Platz frei, und der wird gekachelt, wenn background-repeat: no-repeat fehlt. Hier fällt das Vergessen auf. Bei cover merkt man es nie.
• Zwei Längen wie 240px 120px legen beide Achsen fest und verzerren das Bild deshalb, sobald das Verhältnis nicht stimmt. Eine einzelne Länge setzt nur die Breite, und die Höhe folgt dem Seitenverhältnis. Das ist meistens die bessere Variante.

02 / 04Welcher Ausschnitt übrig bleibt

<div class="feld oben">top</div>
<div class="feld mitte">center, meist die richtige Wahl bei cover</div>
<div class="feld unten">bottom</div>

.feld {
  height: 120px;
  margin-bottom: 12px;
  padding: 8px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
  background-image: url("/lernen/media/hero-1600.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Bei cover ist immer mehr Bild da als Platz.
   background-position entscheidet, welcher Teil bleibt. */
.oben {
  background-position: top;
}

.mitte {
  background-position: center;
}

.unten {
  background-position: bottom;
}

Bei cover ist immer mehr Bild da als Platz. Mit background-position legst du fest, welcher Teil davon stehen bleibt. Der Standard 0% 0% ist selten die richtige Antwort.

Du kannst Schlüsselwörter nehmen (top, center, bottom, left, right), Prozentwerte oder Längen. Schlüsselwörter rechnet der Browser in Prozent um, aus top wird 50% 0% und aus center 50% 50%. Längen bleiben Längen.

Bei Fotos mit Menschen darauf ist das keine Kleinigkeit. Mit background-position: center sind in einem Hero auf breiten Bildschirmen zuverlässig die Köpfe ab. Dort zieht cover das Bild auf die volle Breite, und gekürzt wird oben und unten.

background-repeat steuert die Kachelung. repeat ist der Standard, und no-repeat schaltet sie ab. Mit repeat-x und repeat-y kachelt nur eine Achse. Für Fotos gilt praktisch immer no-repeat, für kleine Muster ist die Kachelung dagegen der ganze Zweck.

background-attachment: fixed lässt den Hintergrund beim Scrollen stehen und ist auf Telefonen unzuverlässig. Mehr dazu steht in der CSS-Referenz unter background Erweitert.

03 / 04Verläufe sind Bilder

<div class="verlauf linear">linear-gradient</div>
<div class="verlauf radial">radial-gradient</div>
<div class="verlauf conic">conic-gradient</div>
<div class="verlauf kante">zwei Stopps an derselben Stelle</div>

.verlauf {
  height: 80px;
  margin-bottom: 12px;
  padding: 8px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
}

/* Der Winkel sagt, wohin der Verlauf zeigt.
   0deg ist nach oben, 90deg nach rechts. */
.linear {
  background-image: linear-gradient(90deg, #2563eb, #7c3aed);
}

.radial {
  background-image: radial-gradient(circle at 30% 40%, #fbbf24, #b91c1c);
}

.conic {
  background-image: conic-gradient(#2563eb, #7c3aed, #b91c1c, #2563eb);
}

/* Zwei Farbstopps an derselben Position ergeben eine
   harte Kante statt eines Übergangs. */
.kante {
  background-image: linear-gradient(90deg, #18181b 0%, #18181b 50%, #fafafa 50%, #fafafa 100%);
}

Für CSS ist ein Verlauf ein Bild. Er steht deshalb in background-image und nicht in background-color. Und er kann alles, was ein Bild kann, also Ebene sein, eine Größe bekommen und positioniert werden.

linear-gradient() bekommt eine Richtung und mindestens zwei Farbstopps. Die Richtung ist ein Winkel (0deg nach oben, 90deg nach rechts) oder eine Angabe wie to bottom right.

radial-gradient() läuft von einem Punkt nach außen, conic-gradient() um einen Punkt herum. Beide stehen in der CSS-Referenz unter Farbverläufe.

Am vierten Kasten siehst du, wie aus einem Verlauf eine Fläche wird. Zwei Farbstopps an derselben Position ergeben eine harte Kante statt eines Übergangs. So baut man Streifen, Schachbretter und Trennlinien.

04 / 04Das Shorthand räumt auf

<div class="feld kaputt">Das Shorthand steht unten</div>
<div class="feld heil">Das Shorthand steht oben</div>

.feld {
  height: 140px;
  margin-bottom: 12px;
  padding: 8px;
  color: #ffffff;
  font-family: system-ui, sans-serif;
}

/* background löscht size, position und repeat gleich mit,
   obwohl davon keins in der Zeile steht. */
.kaputt {
  background-size: cover;
  background-repeat: no-repeat;
  background: #3f3f46 url("/lernen/media/hero-1600.jpg");
}

/* Dieselben vier Angaben, nur andere Reihenfolge. */
.heil {
  background: #3f3f46 url("/lernen/media/hero-1600.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

background fasst alle Hintergrund-Eigenschaften zusammen. Wie jedes Shorthand setzt es dabei alles zurück, was du nicht nennst, und hier erwischt es einen besonders oft.

In beiden Kästen stehen dieselben vier Angaben. Beim oberen steht background als letzte Zeile und löscht dabei background-size und background-repeat gleich mit, obwohl von den beiden in dieser Zeile überhaupt nichts steht. Beim unteren steht es zuerst, und alles bleibt stehen.

So geht ein cover am leichtesten verloren. Es hat ja funktioniert, es wurde nur drei Zeilen später wieder weggeräumt. Ich schreibe das Shorthand deshalb als erste Zeile der Regel, denn was danach an Longhands kommt, kann es dann nicht mehr wegräumen. Die Longhands allein kosten eine Zeile mehr und haben dieses Problem nie.

In der Aufgabe sitzt das Titelbild noch nicht, und unter dem Hero fehlt ein Verlauf.