Parallax Pro – Background Images not covering area

[pixelpaper]

We are having issues with a few sites.
Area background image not stretching behind all content when the display is made smaller.

We have tried taking out some padding but still having issues.

See screenshot...
https://www.dropbox.com/s/64a8uhso44y29qp/Screenshot%202016-03-03%2011.22.06.png?dl=0
https://www.dropbox.com/s/vm7hbx037bf3rsb/Screenshot%202016-03-03%2011.43.45.png?dl=0

I have notice that the demo site has similar issue when under a certain screen size WHEN there is a few extra lines of content.

Thanks, Kim

Is there any direction on this or does the content in this area limited.

Kim

http://www.kingpincaraudio.com/

[ᴅᴀᴠɪᴅ]

It's one of the limitations of the parallax effect. As the background scrolls at a different speed than the content, if there is too much content then you will inevitably arrive at the end of the image before the end of the content.

Apart from shortening the amount of content, or reducing the font size. You can sort of fix it by lessening the parallax effect, until it looks right.

If you find the file found at /wp-content/themes/parallax-pro/js/parallax.js

This is the javascript that causes the background to slow down. Inside the file you will find three bits, all on separate lines in the code that control the 'speed' of the background image of each of the three sections.

-(scrolltop/6)
and
-(backgroundscroll/6)
and another
-(backgroundscroll/6)

Changing the 6 to a higher number, say around 8 should also solve the problem as it will reduce the parallax effect just enough that you don't reach the end of the image. If you still see it, then maybe go to 9. Hope this helps.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Author]

Posts