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

Wasson

developer.mozilla.org/es/docs/CSS/background-attachment , btw, did you actually look for css + background + fixed? – Halo

@Halo While you are right, w3schools sucks sometimes, I'd recommend linking to developer.mozilla.org/en-US/docs/Web/CSS/background-attachment instead. I'm sure the info on the link you provided is fine, but w3schools is not all that reliable... – Mannerly

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.

Turbulent