CSS Academy · Lektion

Hintergrundfarbe und -bild

Wenden Sie mit den Eigenschaften background-color und background-image Hintergrundfarben und -bilder an.

Hintergrundfarbe und -bild ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

background-color

Die Eigenschaft background-color legt eine einfarbige Fläche hinter einem Element fest. Sie akzeptiert jeden CSS-Farbwert und bleibt durch transparente Bereiche von Hintergrundbildern sichtbar.

<div class="hero">Hero section</div>

background-image

background-image legt ein oder mehrere Bilder als Hintergrund des Elements fest. Die Bilder werden über background-color gelegt.

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

background-size

background-size steuert die Abmessungen des Bildes. Wichtige Werte:

cover — füllt den Bereich aus und beschneidet das Bild bei Bedarf
contain — passt das Bild vollständig ein, kann aber Lücken lassen
100% 100% — zieht das Bild so, dass der Bereich exakt ausgefüllt wird

<div class="hero"></div>

background-position

background-position legt fest, wo das Bild platziert wird. Verwenden Sie Schlüsselwörter oder Prozent- bzw. Längenwerte.

<div class="hero"></div>

background-repeat

Standardmäßig werden Bilder gekachelt. Steuern Sie die Kachelung mit background-repeat:

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

background-attachment bestimmt, ob ein Bild mit der Seite scrollt. fixed erzeugt einen Parallax-ähnlichen Effekt; scroll ist der Standardwert.

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

Mehrere Hintergründe

CSS unterstützt mehrere durch Kommas getrennte Hintergrundebenen. Die zuerst aufgeführte Ebene erscheint oben.

<div class="card">Overlay + photo layers</div>

Kurzschreibweise für background

Die Kurzschreibweise background fasst alle Hintergrund-Eigenschaften in einer Deklaration zusammen. Bei der Größe ist die Reihenfolge wichtig: Schreiben Sie sie nach der Position, getrennt durch /.

<div class="hero"></div>

Hintergrund-Clip und -Ursprung

background-clip steuert, wo der Hintergrund relativ zum Box-Modell gezeichnet wird. background-origin legt den Bezugspunkt für die Positionierung fest.

<div class="card">Clip &amp; Origin</div>

Hintergrund auf Text beschneiden

Verwenden Sie background-clip: text zusammen mit einer transparenten Textfarbe, um ein Hintergrundbild oder einen Farbverlauf auf die Form des Textes zu beschneiden.

<h1>Gradient Text</h1>

object-fit für <img> im Vergleich zu background-image

Verwenden Sie für <img>-Tags object-fit: cover und object-position anstelle von background-image. So bleiben Bilder für Barrierefreiheit und SEO im DOM.

<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

Schnelltest

Welcher Wert von background-size füllt den Bereich aus und beschneidet das Bild, anstatt Lücken zu lassen?

Zusammenfassung

Verwenden Sie background-color als Fallback unter Bildern. background-size: cover ist die Standardwahl für vollflächige Hero-Bilder. Mehrere Hintergrundebenen ermöglichen leistungsfähige Kompositionen. Die Kurzschreibweise fasst alle Hintergrund-Eigenschaften kompakt zusammen.

Häufig gestellte Fragen

Ist die Lektion „Hintergrundfarbe und -bild“ kostenlos?

Ja — der vollständige Text von „Hintergrundfarbe und -bild“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Hintergrundfarbe und -bild“?

Wenden Sie mit den Eigenschaften background-color und background-image Hintergrundfarben und -bilder an. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Hintergrundfarbe und -bild“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy