背景图像不适合屏幕宽度

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-size:cover 会切断您想要放置的区域想要可见。在 background-position 属性中使用百分比值将使您可以对其进行更多微调。

背景图像不适合屏幕宽度

Background image doesn't fit in the screen width

html

css

background-image

background-size