HTML Bild als Hintergrund (mit CSS)

Wie beim Computer kann auch bei einer Webseite ein Hintergrundbild eingerichtet werden. Zum einfachen Bild Einbinden in HTML haben wir dir das entsprechende Tutorial verlinkt. Dabei gibt es einige Aspekte die beachtet werden sollten:

Schritt 1: Grundgerüst erstellen

Zuerst brauchst du die Grundstruktur deiner Webseite. Das sieht in etwa so aus:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine Webseite</title>
    <link rel="stylesheet" href="stil.css">
</head>
<body>
    <!-- Dein Inhalt hier -->
</body>
</html>

Schritt 2: Dein Bild vorbereiten

Bevor du loslegst, stelle sicher, dass du das gewünschte Bild griffbereit hast und weißt, wo es gespeichert ist. Zum Beispiel kann es im gleichen Ordner wie deine HTML-Datei sein und den Namen „hintergrund.jpg“ haben.

Schritt 3: CSS-Datei anlege

Erstelle eine neue Datei namens stil.css (oder wie du sie benannt hast). Hier kommt der Stil für das Hintergrundbild rein:

body {
    background: url('hintergrund.jpg') no-repeat center center;
    background-size: cover;
    height: 100vh;
}

Was macht dieser CSS-Code?

  • url('hintergrund.jpg'): Hier gibst du den Pfad zu deinem Bild an.
  • no-repeat: Das Bild wird nicht wiederholt.
  • center center: Das Bild wird zentriert.
  • background-size: cover: Das Bild deckt den gesamten sichtbaren Bereich ab.
  • height: 100vh: Dein Webseite-Inhalt nimmt mindestens die gesamte Bildschirmhöhe ein.

Schritt 4: Testen

Öffne nun deine HTML-Datei in einem Browser deiner Wahl. Das Hintergrundbild sollte nun angezeigt werden.

2 Kommentare zu „HTML Bild als Hintergrund (mit CSS)“

  1. Kleine Fehler aufgetaucht

    3. Die Angabe repeat-x sorgt dafür, ..

    müßte richtig lauten

    3. Die Angabe repeat-y sorgt dafür, ..

    MfG Preinsperger

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen