Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Parallax background issue

Featured Lock Resolved Issue
I have set up a home page with a series of 4 parallax backgound images one above the other. They are all set to the same css properties and all of the background images are in the same aspect ratio. The first image works perfectly, however the succeeding images begin part way down (ie not at the top of the image) and thus they progressively run out of image as you scroll down the page, revealing white space instead.

At full desktop size it is only the last image that displays some white space, however at tablet and mobile sizes the situation is exaggerated and the white space begins beneath the first image.
The other thing I have noticed is that the 4 background images all appear to end at the same position on the page, which is why the white space gets progressively bigger as you scroll down the page.

I have attached a couple of screen captures to show the white space and how the succeeding image is in the same position on the page as the previous one.

The site is on a live server and can be seen at https://www.livingword.nfhop.org

I have tried many different combinations of background properties but nothing seems to make any difference.

Attachments (2)

  • screen-1.jpg
    screen-1.jpg 124.3 KB
  • screen-2.jpg
    screen-2.jpg 97.1 KB

3 Answers

On further investigation it appears that all 4 background images are in exactly the same position on the page - it appears they are stacked on top of each other. I checked the background-position in Firefox using inspection tools, and in each case the background-position for each of the images is idential. These are all set to center-top in the SPPB settings, so I would expect the values to be background-position: 50% 0%. However the y-value instead of being a percentage is a pixel value and changes as you scroll down the page.

Top of page the values are background-position: 50% 249px
Bottom of page the values are background-position: 50% -483px

The question is why are all 4 background images in exactly the same position on the page?

Chris

One week ago #Permalink
I've seen the same issue - I hadn't ever tried more than one image file, I tried to use one image file more than one on the same page as parallax and it did the same thing...

Is this something that can be looked at as an issue to resolve in a future update?
Yes - definitely seems to be a bug in the SPPB parallax system. I turned off parallax option on my test site and everything worked perfectly OK.

Would appreciate the developers confirming that this is a bug where multiple parallax images are used on one page, and if possible providing a workaround until the core code is corrected.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 208
Sifat

Sifat

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 46
Archange Consulting

Archange Consulting

Total Accepted Answers: 2
S

selma123

Total Accepted Answers: 1

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us