使用Stellar.js移动背景图片

Question

I'm developing a vertical scrolling website using Stellar.js. However, the background image I set for my first slide begins to shift as soon as I start scrolling to other pages. How do I keep it fixed? Website: http://andrewgu12.kodingen.com/

Screenshot (that blue area shouldn't be there):

CSS:

div#home {
    padding-top: 110px;
    background:url(../images/home_background.jpg) no-repeat fixed;
    max-height: 589px;
    background-attachment:fixed;
 }

Any help would be appreciated, thanks!

Answer 1

While that will work, it will just kill all your scroll parallax effects - to disable parallax backgrounds and retain parallax elements, find this under the variable declaration area up top and set it to 'false':

"parallaxBackgrounds: true," --> parallaxBackgrounds: false,

Answer 2

You should find in the stellar.js script a section that says scrollProperty: 'scroll', I think you'll need to change it to scrollProperty: 'transform'. Not sure, try it out.