Wie erstellt man: Volles Bild

Lernen Sie, wie man mit CSS ein volles Hintergrundbild erstellt.

Volles Bild

Lernen Sie, wie man ein Hintergrundbild erstellt, das den gesamten Browserfensterbildschirm abdeckt. Das folgende Beispiel zeigt ein responsives Hintergrundbild für den gesamten Bildschirm (und die Hälfte des Bildschirms):

Demonstration - Volles Hintergrundbild

Demonstration - Halbseitiges Hintergrundbild

Wie erstellt man ein volles Bild?

Verwenden Sie ein Behälterelement und fügen Sie diesem eine Hintergrundbild mit einer Höhe von 100% hinzu.

Tipp:Mit 50% kann ein halbseitiges Hintergrundbild erstellt werden. Verwenden Sie dann die folgenden Hintergrundeigenschaften, um das Bild perfekt zentriert und skaliert anzuzeigen:

Hinweis:Um sicherzustellen, dass das Bild den gesamten Bildschirm abdeckt, müssen Sie auch height: 100% wird gleichzeitig angewendet auf <html> und <body>:

Volle Bildschirmhintergrundbild:

body, html {
  height: 100%;
{}
.bg {
  /* Verwendtes Bild */
  background-image: url("dancer.jpg");
  /* Volle Höhe */
  height: 100%;
  /* Zentriert und skaliert das Bild gut */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
{}

Try it yourself

Half-page background image:

.bg {
    height: 50%;
{}

Try it yourself