背景图像不适合屏幕宽度答案

【问题标题】：Background image doesn't fit in the screen width背景图像不适合屏幕宽度
【发布时间】：2015-09-28 20:31:42
【问题描述】：

我设置了背景图片 (1280 x 853)，但不太适合屏幕。

我该如何解决这个问题？

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

【问题讨论】：

试试background-image: url("/assets/pic.jpg"); background-size:cover
试试background-size: 100% 100%

标签： html css background-image background-size

【解决方案1】：

你可以使用：

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

并可选择设置background-repeat: no-repeat 以防止图像重复。

Here's a example.

【讨论】：

【解决方案2】：

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

【讨论】：

还可以选择设置 background-position: center center;如果我有帮助，不要忘记标记答案！谢谢

【解决方案3】：

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

【讨论】：