背景图像不适合屏幕宽度

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以防止图像重复。

Here's a example.

Answer 2

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

Answer 3

除了background-size：cover之外，您还可以使用background-position属性将图像放置在您想要的位置，因为有时背景大小：封面会切断您想要显示的区域。使用background-position属性中的百分比值可以让您对此进行更多调整。