背景位置修复图像问题

Question

我想要两个不同部分的两个背景图像。这些代码适用于单个固定背景。一旦我应用第二个背景，它就会覆盖第一个背景。 我想要修复背景图像并且应该在iPad上工作，单个固定背景在iPad上工作。

Here is the demo

这是我的CSS

.booking-menu-wrapper::before{
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url("http://farm3.staticflickr.com/2533/4062253262_90a3635234_o.jpg") no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.booking2::before{
  content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url("http://uploads.webflow.com/556801b89cccf1594633da22/556807c647dc18034e5e296c_Nature271.jpg") no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
label{
  width:100%;
  background:#fff;
  display:block;
  height:1000px;
  margin-top:200px;
}

注意固定背景不在仍覆盖整个页面的正文标记上