html - 背景画像が画面幅に収まらない

Question

背景画像 (1280 x 853) を設定しましたが、画面にうまく合いません。

どうすれば修正できますか？

body {
  background-image: url("/assets/pic.jpg");
}

Answer 1

以下を使用できます。

body {
    background-image: url("/assets/pic.jpg");
    background-size: cover;
}

オプションbackground-repeat: no-repeatで、画像が繰り返されないように設定します。

これが例です。

Answer 2

body {
    background-image:  url("/assets/pic.jpg");
    background-size:   cover;   
    background-repeat: no-repeat;
}

Answer 3

background-size:cover に加えて、background-position プロパティを使用して、必要な場所に画像を配置できます。background-size:cover によって、表示したい領域が切り取られることがあります。background-position プロパティでパーセンテージ値を使用すると、これをさらに微調整できます。