CSS：使图像填满整个屏幕

Question

如何使图像填满整个屏幕（100％x 100％）？

我在html-tag上使用Flex-Boxes，100％高度，但不知何故它不起作用。

html, body { height: 100%; }

.background-image {
  background-image: url(http://placehold.it/400x400);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section class="background-image">
  <div class="logo">
    <h1 class="title">site-title</h1>
    <h2 class="description">site-description</h2>
  </div>
</section>

Answer 1

您还需要将height: 100%;添加到.background-image课程，因为默认情况下它只会与其中的儿童一样高。

html, body {height:100%;}

.background-image {
  background-image: url(http://placehold.it/400x400);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section class="background-image">
  <div class="logo">
    <h1 class="title">site-title</h1>
    <h2 class="description">site-description</h2>
  </div>
</section>