如何使背景滚动比前景a.k.a视差滚动慢

Question

我需要使用纯CSS，因为js落后于chrome。我希望背景图像比前景（下面的白框）滚动慢。这是我的代码 -

* {margin: 0; padding: 0;}


.parallax .bg__foo {
  position: relative;
  height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}

#box1 {
  background-color:white;
  width:100%;
  height:500px;
}

<div class="parallax">    
<div class="bg__foo"></div>    
<div id="box1"></div>
</div>