title: How to make background position fixed and centered?
body: <p>I have my site set up in 'page-sections' for a vertical scroll. the first page-section is 100% width and height, as are the other sections, but has a background image that scrolls and stretches to the width of the browser. I am trying to maintain this as well as have it fixed position. so it holds still and the content below scrolls up and OVER the background image.</p>
  
  <p>So my question is how do I add on the <code>fixed</code> property to the <code>background-position:center</code> center;</p>
  
  <pre><code>/* div that has background image */
  
  &lt;div class="page-section home-bg clear" id="home"&gt;
  &lt;/div&gt;
  
  /* rest of content I want to scroll up and over */
  
  &lt;div class="page-section clear" id="about"&gt;
      &lt;div class="wrapper" style="background-color:#fff;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .page-section {
      width:100%;
      margin:0px auto 0px auto;
      overflow-x:hidden;
  }
  .home-bg {
      height:100%;
      background:url('img/home-bg.jpg') no-repeat;
      background-position:center center;
      -webkit-background-size:cover;
      -moz-background-size:cover;
      -o-background-size:cover;
      background-size:cover;
      z-index:1;
  }
  </code></pre>