Wie kann man bei HTML ein Hintergrundbild über die ganze Seite erstrecken?
Ich möchte eine HTML Seite erstellen, was ich bisher als Hintergrund habe ist das: Dabei ist das Hintergrundbild links oben komplett, rechts oben aber nochmal zur Hälfte, rechts unten ebenfalls zur Hälfte und links unten auch zur Hälfte vorhanden. Wie kann ich das Bild einmal und dann ganz haben?
3 Antworten
Wie kann ich das Bild einmal und dann ganz haben?
In deinem CSS mit der background Eigenschaft dem Body-Element einen Hintergrund zuweisen. Zusätzlich das Kacheln mit no-repeat unterbinden. Wenn das Hintergrundbild den kompletten Viewport ausfüllen soll, zusätzlich noch die mit background-size dessen Größe bestimmst.
body {
min-height: 100vh;
background: url('path/to/image.jpg') no-repeat center fixed;
background-size: cover;
}Falls der Hintergrund nicht fix sein soll, lediglich den Wert fixed weglassen musst. Hier für dich das Beispiel in einem Zip-Archiv zum Herunterladen gepackt. Einfach herunterladen, entpacken und anschließend in deinem Quelltext-Editor öffnen.
Fullsize Background-Image Example:LG medmonk
Das geht bei html leider nicht, es wird immer in der Originalgröße dargestellt!
Ordne deinem body-Element das Hintergrundbild via CSS zu. Setze zusätzlich die background-size https://developer.mozilla.org/de/docs/Web/CSS/background-size).
background: white url('yourimage.png') no-repeat center;
background-size: cover;
Probiere einfach mal, was für deinen Fall besser passt: cover oder contain.