How to make background position fixed and centered?

Question

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.

So my question is how do I add on the fixed property to the background-position:center center;

/* div that has background image */

<div class="page-section home-bg clear" id="home">
</div>

/* rest of content I want to scroll up and over */

<div class="page-section clear" id="about">
    <div class="wrapper" style="background-color:#fff;">
    </div>
</div>

.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;
}

Answer 1

#main{
   width: 100%;
   height: 100%;
   background: url('../images/bg10.jpg') no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover; 
}

This would be my suggestion, this is what i used and it works for me.