How TO - Ganzseitiges Bild
Erfahren Sie, wie Sie mit CSS ein ganzseitiges Hintergrundbild erstellen.
Ganzseitiges Bild
Erfahren Sie, wie Sie ein Hintergrundbild erstellen, das das gesamte Browserfenster abdeckt. Das folgende Beispiel zeigt ein responsives Hintergrundbild im Vollbildmodus (und im Halbbildmodus):
Demo - Ganzseitiges Hintergrundbild
Demo - Halbseitiges Hintergrundbild
So erstellen Sie ein Bild in voller Höhe
Verwenden Sie ein Containerelement und fügen Sie dem Container mit ein Hintergrundbild hinzu height: 100%
.
Tipp: Verwenden Sie 50 %, um ein halbseitiges Hintergrundbild zu erstellen. Verwenden Sie dann die folgenden Hintergrundeigenschaften, um das Bild perfekt zu zentrieren und zu skalieren:
Hinweis: Um sicherzustellen, dass das Bild den gesamten Bildschirm abdeckt, müssen Sie auch height: 100%
auf <html> und <body> anwenden:
Beispiel
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Halbseitiges Hintergrundbild:
Beispiel
.bg {
height: 50%;
}