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 属性中使用百分比值将允许您对其进行更多微调。