html - 在移动设备中查看时 y 轴上的背景重复

Question

在移动设备上查看时，我无法让我的背景图像在 y 轴上重复。当前在桌面上时，页面无法滚动并且背景图像会填满屏幕。但是如果你移动到平板电脑或手机，你需要滚动并且图像不会重复。我目前的代码并不多:

  body {
    background-image: url("../assets/BG.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center center;
    margin-top: 0;
    position: absolute;
    height: 100%;
    width:100%;
    margin: 0;
  }

任何帮助都会很棒。

问题动图:https://imgur.com/a/jX19E

Answer 1

从该规则中删除 background-size: cover; - 这将始终填充整个主体元素，以及滚动时出现的部分。添加 background-size: 100% auto; 并将位置更改为 background-position: left top 以确保图像覆盖整个宽度，从左上角开始边缘。

(顺便说一句，position: absolute; 对于 body 元素来说很奇怪)

这是一个使用占位符图像进行演示的片段:

 body {
    background-image: url("http://lorempixel.com/600/100/food");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: left top;
    margin-top: 0;
    position: absolute;
    height: 100%;
    width:100%;
    margin: 0;
  }