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

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

Mike Coomber

More than a month ago #Permalink
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?


More than a month 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?

Mike Coomber

More than a month ago #Permalink
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)



Total Accepted Answers: 125
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 120


Total Accepted Answers: 62


Total Accepted Answers: 5
Mohammed Ahmed

Mohammed Ahmed

Total Accepted Answers: 2




Community Users


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. is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us