html - HTML - 背景サイズに含まれる画像が小さすぎる

Question

私が使う：

<style>
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}
</style>

画像全体を表示するために常に引き伸ばされる背景画像を作成しようとしていますが、これをテストすると、画像が小さくなります...これはどうしたことですか？

Answer 1

体に高さを与える必要があります。

html, body {
     height: 100%;
}
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

または、「背景 div」を追加することもできます。

#bkg {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  
  background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

<div id="bkg"></div>

Answer 2

これにより、画像のフル解像度が表示されますbackground-size:contain

結果