Kapitel 7: Hintergrundstile

Hintergründe können einer Webseite Leben einhauchen! In diesem Kapitel lernen Sie, wie Sie Farben, Bilder und Verläufe als Hintergrund verwenden.

7.1 Hintergrundfarbe (background-color)

Die einfachste Art, einen Hintergrund zu gestalten: Mit einer reinen Farbe.

📝 Syntax

css

selektor {
    background-color: farbwert;
}

🎨 Beispiele

css

/* Verschiedene Möglichkeiten, Farben anzugeben */

/* Farbname */
body {
    background-color: lightblue;
}

/* Hexadezimal (am häufigsten verwendet) */
header {
    background-color: #3366cc;
}

/* RGB */
main {
    background-color: rgb(240, 240, 240);
}

/* RGBA (mit Transparenz) */
.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Halb-transparentes Schwarz */
}

/* HSL */
footer {
    background-color: hsl(120, 100%, 50%); /* Grün */
}

/* Transparenter Hintergrund */
.transparent {
    background-color: transparent;
}

💡 Tipps für Hintergrundfarben

Hell/dunkel-Kontrast: Stellen Sie sicher, dass der Text gut lesbar ist!

css

/* Gut: Dunkler Text auf hellem Hintergrund */
.readable {
    background-color: #ffffff;
    color: #333333;
}

/* Schlecht: Schwer zu lesen */
.hard-to-read {
    background-color: #cccccc;
    color: #aaaaaa;
}

Verlauf von Farben: Verwenden Sie Verläufe für moderne Designs (siehe Kapitel 19).

7.2 Hintergrundbild (background-image)

Fügen Sie Bilder als Hintergrund hinzu!

📝 Syntax

css

selektor {
    background-image: url('pfad/zum/bild.jpg');
}

🎯 Beispiel

css

/* Einfaches Hintergrundbild */
.hero-section {
    background-image: url('images/hero-bg.jpg');
    height: 500px; /* Wichtig: Höhe angeben! */
}

/* Hintergrundbild mit Fallback-Farbe */
.hero-section {
    background-color: #3366cc; /* Fallback, falls Bild nicht lädt */
    background-image: url('images/hero-bg.jpg');
    height: 500px;
}

/* Mehrere Hintergrundbilder (übereinander) */
.multi-bg {
    background-image: url('images/pattern.png'), url('images/gradient.jpg');
    background-color: #f0f0f0;
}

💡 Tipps für Hintergrundbilder

Immer eine Hintergrundfarbe als Fallback angeben!
Bildgröße beachten: Große Bilder laden langsam
Pfad korrekt angeben: Relativer Pfad von der CSS-Datei aus!

7.3 Hintergrundwiederholung (background-repeat)

Steuert, ob und wie ein Hintergrundbild wiederholt wird.

📝 Syntax

css

selektor {
    background-repeat: wert;
}

🔄 Mögliche Werte

Wert	Beschreibung
`repeat` (Standard)	Bild wird horizontal und vertikal wiederholt
`repeat-x`	Nur horizontal wiederholen
`repeat-y`	Nur vertikal wiederholen
`no-repeat`	Nicht wiederholen (am häufigsten verwendet!)
`space`	Bild wiederholen, mit Abständen auffüllen
`round`	Bild wiederholen, dabei skalieren

🎯 Beispiele

css

/* Hintergrundbild nicht wiederholen (häufigster Fall) */
.hero-section {
    background-image: url('images/hero-bg.jpg');
    background-repeat: no-repeat;
    height: 500px;
}

/* Muster wiederholen (wiederholen ist gut für Muster!) */
.pattern-bg {
    background-image: url('images/pattern.png');
    background-repeat: repeat; /* oder einfach weglassen, da Standard */
}

/* Nur horizontal wiederholen (z.B. für Streifen) */
.stripe-bg {
    background-image: url('images/stripe.png');
    background-repeat: repeat-x;
}

7.4 Hintergrundposition (background-position)

Legt fest, wo das Hintergrundbild positioniert wird.

📝 Syntax

css

selektor {
    background-position: horizontal vertikal;
}

📍 Mögliche Werte

Schlüsselwörter: left, right, center, top, bottom
Prozentangaben: 0% 0%, 50% 50%, 100% 100%
Feste Längen: 20px 30px

🎯 Beispiele

css

/* Bild zentrieren (häufigster Fall) */
.centered-bg {
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
}

/* Bild oben rechts positionieren */
.top-right-bg {
    background-image: url('images/icon.png');
    background-repeat: no-repeat;
    background-position: right top;
}

/* Bild mit festen Werten positionieren */
.custom-position {
    background-image: url('images/badge.png');
    background-repeat: no-repeat;
    background-position: 20px 30px; /* 20px vom linken Rand, 30px vom oberen Rand */
}

7.5 Hintergrundgröße (background-size)

Steuert, wie groß das Hintergrundbild angezeigt wird.

📝 Syntax

css

selektor {
    background-size: wert;
}

📏 Mögliche Werte

Wert	Beschreibung
`auto` (Standard)	Bild wird in Originalgröße angezeigt
`cover`	Bild wird so skaliert, dass es den gesamten Bereich abdeckt (kann abgeschnitten werden)
`contain`	Bild wird so skaliert, dass es vollständig sichtbar ist (kann Leeräume lassen)
`Breite Höhe`	Feste Werte (z.B. `100% 100%`, `200px auto`)

🎯 Beispiele

css

/* Vollbild-Hintergrund (häufig für Hero-Sections) */
.hero-section {
    background-image: url('images/hero-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Bild deckt den gesamten Bereich ab */
    height: 100vh; /* Volle Bildschirmhöhe */
}

/* Hintergrundbild vollständig anzeigen (ohne Beschnitt) */
.logo-container {
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* Bild wird vollständig angezeigt */
    width: 200px;
    height: 100px;
}

/* Hintergrundbild auf feste Größe skalieren */
.stretched-bg {
    background-image: url('images/pattern.png');
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Bild wird auf den gesamten Bereich gestreckt */
}

7.6 Hintergrund-Kurzschreibweise (background)

Alle Hintergrund-Eigenschaften können in einer einzigen Zeile zusammengefasst werden!

📝 Syntax

css

selektor {
    background: [background-color] [background-image] [background-repeat] [background-position] / [background-size];
}

🎯 Beispiele

css

/* Ausführlich (viele Zeilen) */
.hero-section {
    background-color: #3366cc;
    background-image: url('images/hero-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Kurzschreibweise (eine Zeile!) */
.hero-section {
    background: #3366cc url('images/hero-bg.jpg') no-repeat center center / cover;
}

/* Einfaches Beispiel (nur Farbe) */
.simple-bg {
    background: lightblue;
}

/* Einfaches Beispiel (nur Bild, nicht wiederholen, zentrieren) */
.image-bg {
    background: url('images/logo.png') no-repeat center center;
}

💡 Reihenfolge in der Kurzschreibweise

Die Reihenfolge ist nicht strikt vorgeschrieben, aber diese Reihenfolge ist am üblichsten:

background: Farbe Bild Wiederholung Position / Größe;

7.7 Praxis: Vollbild-Hintergrund und Karten mit Hintergrundfarbe

Lassen Sie uns zwei praktische Beispiele erstellen!

🎯 Beispiel 1: Vollbild-Hintergrund (Hero-Section)

HTML (index.html):

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vollbild-Hintergrund</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="hero-section">
        <h1>Willkommen auf meiner Webseite</h1>
        <p>Lernen Sie CSS und gestalten Sie wunderschöne Webseiten!</p>
        <a href="#" class="cta-button">Jetzt starten</a>
    </header>
    
    <main>
        <p>Dies ist der Hauptinhalt der Seite.</p>
    </main>
</body>
</html>

CSS (style.css):

css

/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== Hero-Section ===== */
.hero-section {
    /* Hintergrund-Kurzschreibweise */
    background: 
        /* Farbverlauf (optional, für bessere Lesbarkeit) */
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        /* Hintergrundbild */
        url('https://picsum.photos/1920/1080') no-repeat center center / cover;
    
    /* Volle Bildschirmhöhe */
    height: 100vh;
    
    /* Text zentrieren */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Textfarbe */
    color: white;
    text-align: center;
    
    /* Abstand */
    padding: 20px;
}

.hero-section h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-section p {
    font-size: 1.25rem;
    margin-bottom: 30px;
    max-width: 600px;
}

.cta-button {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #45a049;
}

/* ===== Hauptinhalt ===== */
main {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

🎯 Beispiel 2: Karten mit Hintergrundfarbe

HTML (index.html):

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karten mit Hintergrundfarbe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
            <h2>Karte 1</h2>
            <p>Dies ist eine einfache Karte mit Hintergrundfarbe.</p>
        </div>
        
        <div class="card highlight-card">
            <h2>Karte 2 (Hervorgehoben)</h2>
            <p>Diese Karte hat eine andere Hintergrundfarbe.</p>
        </div>
        
        <div class="card">
            <h2>Karte 3</h2>
            <p>Noch eine Karte mit Hintergrundfarbe.</p>
        </div>
    </div>
</body>
</html>

CSS (style.css):

css

/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background-color: #f0f0f0;
}

/* ===== Karten-Container ===== */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Einzelne Karte ===== */
.card {
    /* Hintergrundfarbe */
    background-color: #ffffff;
    
    /* Innenabstand */
    padding: 30px;
    
    /* Abrundung */
    border-radius: 12px;
    
    /* Schatten */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Flex-Item-Eigenschaften */
    flex: 1 1 300px;
    
    /* Übergang für Hover-Effekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt für Karten */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Titel der Karte */
.card h2 {
    color: #333333;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Text der Karte */
.card p {
    color: #666666;
    line-height: 1.6;
}

/* Hervorgehobene Karte (andere Hintergrundfarbe) */
.highlight-card {
    background-color: #e6f7ff; /* Hellblau */
    border-left: 5px solid #1890ff;
}

.highlight-card h2 {
    color: #1890ff;
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Hintergrundfarbe festlegen (background-color)
✅ Hintergrundbild einfügen (background-image)
✅ Hintergrundwiederholung steuern (background-repeat)
✅ Hintergrundposition festlegen (background-position)
✅ Hintergrundgröße steuern (background-size)
✅ Hintergrund-Kurzschreibweise verwenden (background)
✅ Praktische Beispiele: Vollbild-Hintergrund und Karten

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

Rahmen (Border) erlernen
Rahmen-Stile anwenden
Abrundungen und Schatten erstellen

Bereit für mehr? Los geht's! 🎨

Kapitel 7: Hintergrundstile ​

7.1 Hintergrundfarbe (background-color) ​

📝 Syntax ​

🎨 Beispiele ​

💡 Tipps für Hintergrundfarben ​

7.2 Hintergrundbild (background-image) ​

📝 Syntax ​

🎯 Beispiel ​

💡 Tipps für Hintergrundbilder ​

7.3 Hintergrundwiederholung (background-repeat) ​

📝 Syntax ​

🔄 Mögliche Werte ​

🎯 Beispiele ​

7.4 Hintergrundposition (background-position) ​

📝 Syntax ​

📍 Mögliche Werte ​

🎯 Beispiele ​

7.5 Hintergrundgröße (background-size) ​

📝 Syntax ​

📏 Mögliche Werte ​

🎯 Beispiele ​

7.6 Hintergrund-Kurzschreibweise (background) ​

📝 Syntax ​

🎯 Beispiele ​

💡 Reihenfolge in der Kurzschreibweise ​

7.7 Praxis: Vollbild-Hintergrund und Karten mit Hintergrundfarbe ​

🎯 Beispiel 1: Vollbild-Hintergrund (Hero-Section) ​

🎯 Beispiel 2: Karten mit Hintergrundfarbe ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

Kapitel 7: Hintergrundstile

7.1 Hintergrundfarbe (background-color)

📝 Syntax

🎨 Beispiele

💡 Tipps für Hintergrundfarben

7.2 Hintergrundbild (background-image)

📝 Syntax

🎯 Beispiel

💡 Tipps für Hintergrundbilder

7.3 Hintergrundwiederholung (background-repeat)

📝 Syntax

🔄 Mögliche Werte

🎯 Beispiele

7.4 Hintergrundposition (background-position)

📝 Syntax

📍 Mögliche Werte

🎯 Beispiele

7.5 Hintergrundgröße (background-size)

📝 Syntax

📏 Mögliche Werte

🎯 Beispiele

7.6 Hintergrund-Kurzschreibweise (background)

📝 Syntax

🎯 Beispiele

💡 Reihenfolge in der Kurzschreibweise

7.7 Praxis: Vollbild-Hintergrund und Karten mit Hintergrundfarbe

🎯 Beispiel 1: Vollbild-Hintergrund (Hero-Section)

🎯 Beispiel 2: Karten mit Hintergrundfarbe

📝 Zusammenfassung

🎯 Nächste Schritte