[Resolved] Parallax images splitting

[Melody]

Hey there,

I’m using the parallax effects on sections of image on my website. I’m using the same settings (top & bottom padding 200, same size images) for the sections on different pages. Some of them are working, but on some of them the image is ‘splitting’ – cutting short and then beginning again when scrolling.
Here it’s working right: http://dev2.redchurch.org.au/get-connected (top image)
Here it’s not working: http://dev2.redchurch.org.au/ (image half way down page)

Is it because it’s in the middle of the page? How might I go about fixing it?

Thanks so much,
Melody

[Tom]

Parallax can be funny with images further down the page, but I’m not seeing anything broken with that second link (nice looking website!).

What browser are you using? Any chance you can post a screenshot of what you’re seeing?

Thanks!

[Melody]

Thanks Tom.

I’m using both chrome and safari as I go along to see how its coming out and both show the same issue:
http://dev2.redchurch.org.au/wp-content/uploads/2015/08/Screen-Shot-2015-08-11-at-5.42.04-pm.png
The image ends early and then adds the top of the image down the bottom.

Cheers

[Tom]

Ah yea, I wasn’t noticing because I have a large screen.

This is because the image isn’t tall enough for that area. Once you reach it by scrolling, it’s already scrolled the entire height of the image.

I need to find a way to only start the scrolling of the image when it’s in view – will work on getting this fixed ASAP.

For now, try and find a taller image that works.

[Melody]

Makes sense, I’ve amended it and have a better understanding of why it was happening – thanks!

Cheers for the great theme too.

[Sven]

Hello Tom,

thanks for your pretty theme and add-ons! Found it, installed it, love it!

I want to use the parallax effect on the startup page on http://fudiggl.de and added images in different sections. As I understand now (after reading he knowledge base) the one in the last section is too small. So therefore I intended to use larger images… but on my smartphone and tablet (android, chrome browser) the parallax effect does not work at all AND the whole images are shown – even if I change the padding numbers. Any suggestions?

I read that you want to add some features to parallax effects? What’s the situation here?

Furthermore: is there a manual for the sections parameters? I do not really understand what happens when I customize top/bottom padding and how these depend on or intefere with the image size! Is there a guide anywhere?

Greetings from Germany,
Sven

[Tom]

Hi Sven,

Parallax on mobile is pretty messy/not user friendly, so it’s deactivated on purpose to increase user experience.

On mobile the background image size should be set to cover, so as much as the image will be shown as possible. Does it not look right?

Page Header/Sections will be going through a user experience overhaul before any more parallax options are added at this point.

Top/Bottom padding simply adds spacing to the top and bottom of the inside content of the section.

More top/bottom padding will make the section taller etc..

[Sven]

Hi Tom,

thanks for your fast answer and your information!

Concerning padding with parallax background images in sections: I understand that text in sections is set corresponding to the values of top/bottom paging. But I actually don’t understand the results I get concerning background images… when setting each (top AND bottom) to “0” images are not showed at all…. so therefore the values influence the images themselves. But how?

Where do the values start (please compare attached jpg)?
What happens to sections with background images 300px high with top padding 200 and bottom padding 200?
What about negative figures?

I guess that concering text in sections the black example is the correct one. But I still cannot comprehend how image sizes are influenced! I really appreciate your help!

Thank you in advance,
Sven

[Tom]

Hi Sven,

The image will only show up if the element has content or padding.

If there’s no content or padding, there’s nothing adding height to the area, so the image can’t show.

The image is told to display within the content area – so the taller the area is (by using content or padding or both), the more area the image will take up.

[Sven]

… got it now!
🙂

Thank you!

Sven

[Tom]

You’re welcome 🙂

[Author]

Posts