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

我正在尝试创建一个在

页眉

和

页脚

之间有背景图像的页面，该页面可以在任何屏幕大小上使用

我已经成功地创建了这个页面，它可以在桌面屏幕上正常工作。我遇到的问题是，当我调整到

手机大小屏幕时，背景会重复出现

这是我的密码：

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

将height属性设置为特定高度，但我不确定如何更改该属性，使其适用于所有屏幕大小

可在以下网址查看该网站：

如果有人能建议我如何解决这个问题，我将非常感激

提前感谢。
无
不是
后台重复
的有效值，请改用
无重复

后台重复属性（）（）
无
不是
后台重复
的有效值，请改用
无重复

背景重复属性（）（）
更改
背景重复：无至<代码>背景重复：无重复
none
不是
后台重复
属性的有效值

您的代码应该是：

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;
}

更改
背景重复：无至<代码>背景重复：无重复
none
不是
后台重复
属性的有效值

您的代码应该是：

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;
}

背景重复的可能值，您需要：

background-repeat: no-repeat;

此属性不存在任何值。
对于背景重复的可能值，您需要：

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;
}

使用背景重复：无重复

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;
}

谢谢各位，非常感谢你们的回答。顺便说一句，是有无论如何，以减少高度，因为现在我有一个大的空白在底部。我是否需要添加媒体查询来控制此操作？或者有没有一种方法可以在相同的代码中实现呢？@user3191160最好在
HTML
中使用
img
。将您的图像放入
div
中，并将其设置为
div img样式{display:block；height:auto；width:100%；
并从您的
div
中删除
height
。谢谢您，这是可行的，但我猜如果我在图像顶部添加文本，这将不起作用，因为这将不再位于图像顶部。@user3191160您可以将图像或文本放置在
位置：absolute
上如果需要，请使用
z-index
。谢谢各位，非常感谢你们的回答。顺便说一句，这里的高度可以降低，因为现在我在底部有一个很大的空白。我需要添加媒体查询来控制这一点吗？或者有没有办法在相同的代码中实现这一点？@user3191160最好在
HTMLimg
ode>。将您的图像放入
div
中，并将其设置为
div img的样式{display:block；height:auto；width:100%；
并从您的
div
中删除
height
。谢谢您，这是可行的，但我猜如果我在图像顶部添加文本，这将不起作用，因为这将不再位于图像顶部。@user3191160您可以将图像或文本放置在
位置：absolute
上如果需要，请使用
z-index
了解您的需要。