How to make the background position fixed and centered?

Question

I have a site created in the "pages" section for vertical scrolling. The first page is 100% width and height, like other sections, but has a background image that scrolls and stretches to the width of the browser. I try to maintain this, as well as fix the position. therefore, it is held still, and the content below scrolls up and over the background image.

So my question is how to add a property fixedto the center background-position: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; 
}

That would be my suggestion, this is what I used, and it works for me.