Lädt...

CSS-Hintergründe

Sie können Text färben. Jetzt bemalen Sie die Fläche dahinter. Hintergründe füllen die Box des Elements — Vollton, Fotos und später Verläufe — während die Buchstaben mit color oben bleiben.

Was ist ein CSS-Hintergrund?

Ein Hintergrund ist die Schicht, die hinter dem Inhalt eines Elements gemalt wird (meist auch hinter dem Padding). Sie steuern ihn mit einer Eigenschaftsfamilie: background-color, background-image, background-repeat, background-size, background-position und der Kurzform background. Verläufe haben eine eigene Lektion — heute Vollton und Bild-Grundlagen.

Eigenschaften auf einen Blick

Lernen Sie zuerst die Aufgaben. Nicht jedes Schlüsselwort braucht Tag eins.

📊 Alltägliche CSS-Hintergrund-Eigenschaften

Eigenschaft Aufgabe Alltagsstart
background-color Vollton hinter dem Inhalt background-color: #f1f5f9;
background-image Bildschicht (später auch Verlauf) background-image: url("hero.jpg");
background-repeat Kacheln oder stoppen background-repeat: no-repeat;
background-size Bild in der Box skalieren background-size: cover;
background-position Bild ausrichten background-position: center;
background Kurzform mehrerer Werte background: #0f172a url("a.jpg") center / cover no-repeat;

Vollton mit background-color

Der einfachste Hintergrund ist eine Volltonfarbe. Nutzen Sie jeden Farbwert, den Sie schon kennen — benannt, hex, rgb oder hsl.

Vollton-Kartenhintergrund

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

Text lesbar halten

Setzen Sie color für Buchstaben und background-color für die Box. Helle Füllungen brauchen dunkleren Text; dunkle Füllungen helleren Text.

Bilder mit background-image

Zeigen Sie mit url("…") auf eine Datei. Pfade sind relativ zur CSS-Datei (oder absolute URLs). Das Bild liegt hinter dem Inhalt — es ist kein <img> im HTML-Fluss.

Foto hinter einem Hero-Block

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

Bild vs. <img>

Nutzen Sie <img>, wenn das Bild Inhalt ist (Alt-Text, Bedeutung). Nutzen Sie background-image, wenn es Dekoration hinter UI oder einem Abschnitt ist.

Kacheln stoppen: no-repeat + cover

Standardmäßig kacheln viele Browser ein kleines Bild. Für Heroes Kacheln aus und mit cover skalieren, damit das Foto die Box füllt.

Hero-Bild, das die Box füllt

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

cover in einem Satz

cover skaliert, bis die Box gefüllt ist — Ränder können beschnitten werden. contain passt das ganze Bild ein — leere Streifen sind möglich.

Fokuspunkt ausrichten

background-position bestimmt, welcher Bildteil sichtbar bleibt — hilfreich, wenn cover Gesichter oder Logos abschneidet.

Foto ausrichten

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

Kurzform (lesbar bleiben)

Sie können Werte in background kombinieren. Lernen Sie zuerst mit Einzeleigenschaften; wechseln Sie zur Kurzform, wenn die Reihenfolge vertraut ist.

Kompakte Hintergrund-Kurzform

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

Reihenfolge-Tipp

Ein übliches Muster: Farbe, Bild, position / size, repeat. Verwirrt die Kurzform — wieder aufteilen. Beides ist gültig.

Selbst ausprobieren

  1. .card mit background-color: #f1f5f9 und dunklem color-Text.
  2. .hero mit background-image: url("…"), min-height und hellem Text.
  3. background-repeat: no-repeat, background-size: cover, background-position: center.
  4. Position auf left center oder right center — beobachten, was im Bild bleibt.
  5. Optional: Hero mit background-Kurzform und Fallback-Farbe vor url() neu schreiben.

Häufige Fehler

  • color statt Box-Füllung — färbt nur Buchstaben
  • no-repeat vergessen, sodass ein Logo den Abschnitt kachelt
  • Kaputte url("…")-Pfade (falscher Ordner oder fehlende Anführungszeichen)
  • Riesige unkomprimierte Fotos als Hintergründe — langsame Seiten
  • Zu komplexe Verläufe springen, bevor Vollton + ein Bild sitzen (Verläufe folgen)

Kurz

  • Hintergründe liegen hinter dem Inhalt; color färbt Text
  • background-color für Vollton; background-image für Fotos
  • Steuern Sie Fotos mit no-repeat, cover/contain und position
  • Kurzform ist optional — Klarheit schlägt Cleverness beim Lernen
  • Vollständige Verlaufsrezepte in der nächsten Lektion
  • Üben Sie eine graue Karte und einen Foto-Hero, bis die Namen sitzen

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial