I am using StickyPanel, Smooth-Scroll and Scrolly, and I need fixed (content moves over it) backgrounds on the even 'pages', and a parallax background (content & background move separate to each other) on the odd 'pages'. So my 'pages' go even, odd, even, odd, even. The 'pages' are 5 divs, one under the other, and each div is set to the width & height of the browser window, to make a one page website.
The problem I am having is that on 'pages' 2 & 4 with the parallax backgrounds, the background is mispositioned. By inspecting the element, I found that the background-position set by Scrolly is so far off, the background images don't even show up. Scrolly gives you two attributes to set on the element with the scrolling background:
<div data-velocity=".3" data-fit="1000">
These allow you to set the speed of the Parallax element and set the relative background position respectively. I have found that when I adjust the backgrounds using the data-fit attribute, it will never be in the right place, because the 'page' and thus the background height are relative to the browser window.
I need the background to always be covering the div, i.e. if the background-image was an image with no transparency, then the background-color of the divs would never show.
I think possibly setting the background to ~10% more than the browser window could help, but I'm not sure how to do that.
Here is a jsFiddle, although for some reason the background image won't show on 'page' 5. I also set the background image to a placeholder, and set the divs to have random background colours, for ease whilst in development.
This has been a hard problem to explain, so I may not have thoroughly conveyed my point. If I think of a better way to explain the problem, I will update my post.
Thanks
Okay this was a simple one, finally figured it out though. I was half way through using JS to get the page height, get 130% of the page height and then set the background image css as that, when I realised I can just set it in CSS.... So I set the background-size to 100% 130%, and then it was just a case of perfecting it with the data-fit attribute. It's close enough for my liking now anyway.
background-size: 100% 130%;