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:
Inhalt
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.
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