画像を画面の高さいっぱいに表示する

画像をブラウザの画面の高さいっぱいまで表示するには、 画像を表示する要素のheightプロパティで「100vh」と指定する。

HTML

  <div>
    <section class="conA">
      <div class="container">
      </div>
    </section>
  </div>

CSS

.conA {
  height: 100vh;
  background-image: url(/img/fruits.jpg);
  background-position: center;
  background-color: cover;
  text-align: center;
}