CODEWITHSUNDEEP
cssvertical-scrolling
Andrew
Andrew

Reputation: 3589

Background image moves using Stellar.js

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):

enter image description here

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!

Upvotes: 0

Views: 1197

Answers (2)

Ashwin
Ashwin

Reputation: 11

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,

Upvotes: 1

Dave
Dave

Reputation: 7

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.

Upvotes: 0

Related Questions