Question

我正在尝试创建一个页面，其中header和footer之间的背景图片可用于任何屏幕尺寸。

我已设法创建页面，它在桌面屏幕上运行正常。我遇到的问题是当我调整到mobile size screen时，会重复背景。

这是我的代码：

div {
    width: 100%;
    height: 5886px;
    background-image: url('services-yellow.jpg');
    background-size: 100% auto;
    background-repeat: none;
    border: none;
}

高度属性是否设置在特定高度，但我不知道如何更改它以使其适用于所有屏幕尺寸。

可以在http://s116169771.websitehome.co.uk/testsite/

查看该网站

如果有人可以告诉我如何解决这个问题，我会非常感激。

提前致谢。

Answer 1

none不是background-repeat的有效值，而是使用no-repeat。

background-repeat属性（MDN）（W3Schools）

Answer 2

Here is a list背景重复的可能值，您需要：

background-repeat: no-repeat;

此属性不存在。

Answer 3

使用background-repeat:no-repeat

div {
    width: 100%;
    height: 5886px;
    background-image: url('services-yellow.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    border: none;
}

或简单地缩短代码

div {
    width: 100%;
    height: 5886px;
    background: url('services-yellow.jpg') no-repeat 100%;
    border: none;
}

Answer 4

将background-repeat: none;更改为background-repeat: no-repeat; none不是background-repeat属性的有效值。

您的代码应为：

div {
  width: 100%;
  height: 5886px;
  background-image: url('services-yellow.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
  border: none;
}

您还可以使用简写css background属性，如下所示：

div {
  width: 100%;
  height: 5886px;
  background: url('services-yellow.jpg') no-repeat 100% auto;
  border: none;
}

More Details

背景图像在调整窗口宽度时重复

4 个答案: