title: CSS background-image Not Fixed
body: <p>I'm trying to do a simple background-image that will stay in place when I scroll down the page. The background image won't stay in place. I've set the background-attachment to fixed.</p>
  
  <p>See: <a href="http://www.emergencydatascience.org" rel="nofollow noreferrer">www.emergencydatascience.org</a></p>
  
  <p>My CSS code:</p>
  
  <pre><code>background-image: url($background_image); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  </code></pre>
  
  <p>More CSS if it helps:
  <a href="https://github.com/dighr/data-flood/blob/gh-pages/_sass/layout/_wrapper.scss" rel="nofollow noreferrer">https://github.com/dighr/data-flood/blob/gh-pages/_sass/layout/_wrapper.scss</a></p>