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

任何帮助都会很棒。

问题的Gif：https://imgur.com/a/jX19E

Answer 1

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

（顺便说一下，position: absolute;元素的body相当奇怪）

这是一个用占位符图片演示它的片段：

＆＃13;

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

＆＃13;

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

1 个答案: