html - 背景图片在移动设备上不显示全高

Question

我的一个 friend 建立了一个小登陆页面，并向我询问有关移动设备 (Chrome) 的问题。背景图片(正文)设置为覆盖

body {
background-image: linear-gradient(135deg, rgba(14, 113, 184, 0.8) 0%, rgba(28, 22, 53, 0.6) 100%), url("../img/bgvid.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

背景图像将在整个视口(viewport)内呈现，但如果我向下滚动，它有点被剪切了，请查看下面的图像以了解我的意思(灰色 block )。他正在寻求我的帮助，但我真的不知道是什么原因造成的。我尝试删除页脚(并将 body 高度设置为 100%)，但没有任何改变。

---

已解决

修复:看起来固定背景不适用于移动浏览器。这修复了它:

background-attachment: scroll;

Answer 1

CSS background image to fit width, height should auto-scale in proportion

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}