CSS 背景图像不在移动设备上滚动

Question

向下滚动页面时，我有一个背景图像保持在原位。 在这里查看 JSFiddle:JS Fiddle
代码

body {
  font-family: 'Open Sans', sans-serif;
  background-image: url("http://vrexpert.virtualrealities.netdna-cdn.com/wp-content/uploads/2015/12/Google5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  overflow-x: hidden !important;
  }

但是
这在使用移动设备时不会应用。(例如，我使用的是 iPad)。图片不随页面滚动。

如何在移动设备上获得与在桌面设备上相同的结果？

Answer 1

尝试以下操作:(改编自 background: fixed no repeat not working on mobile)

body:before {
  font-family: 'Open Sans', sans-serif;
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("http://vrexpert.virtualrealities.netdna-cdn.com/wp-content/uploads/2015/12/Google5.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}