My site http://eyedialabs.ca/metrobestyoga/ has a section where the paralax image isn’t possitioning correctly. I think it’s due to an element above that I have (for mindbody booking software) that loads ater the page does and I think it throws off the paralax background as it loads first.
Could you let me know what I can do to fix it?
here is an image of the area: http://imgur.com/a/urrqd
Thank you
Hi There,
You need to edit your image or change it.
The proportion of the width is to large for the height.
Hope it helps
I asked only as the image works fine if that area is removed.
Hi There,
Yes, that is correct, because without that element the whole section heigh is smaller, so the images will work fine.
If you want it to work with the element on top, please follow the reccomendations.
Thank you
Ok, I will add a larger image if thats the only solution, but I think you misunderstand what I mean.
The element above I am talking about, is in a different section all together, so it’s height etc, wouldn’t be affecting the inner dimensions of the following section where i’m having issues. That above section includes a booking plugin that only loads after the page does and seams to throw off the paralax background in the section below.
If I completely remove the section above the parallax section, the image does fit the space correctly.
Hi There,
If that is the case then you need to do a window resize when the page is ready (fully loaded)
You can use one of the JS code that was provided here, you can put JS code on the page’s Settings > JS or on Theme Options > JS
However, I am seeing a lot of JS error on your site (https://prnt.sc/g9hvsi) this might be the root of the parallax issue. Please do a testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
Thanks,
hmmm… i’m a bit confused with the JS code you sent me. Which of the three sugestions is best for my situation?
I know exactly what plugin is causing the issue. As mentioned, it’s the mind body app that is added in the section 2 above the area i’m having issue with the paralax. As it’s booking software for the studio, I can’t really remove it. If you take a look, you can see it loads after the page does and that’s what is throwing the parallax sizing off.
I didn’t mention, but I did add a different image that was twice the height of what I had previously in the paralax area (as per your suggestion, but it’s still showing a blank area below the image as you scroll.
Thank you for your help.
Hi there,
I checked your website and see that the plugin conflicts with the calculation of the parallax functionality of the theme. As soon as that section loads after the completion of the page load, it ruins the calculation.
Unfortunately, we can not do anything about this as this is something related to a conflict which a 3rd party plugin causes. I suggest that you turn off the Parallax functionality of that section and simply add the code below to the style option of the section:
background-attachment: fixed;
That will have somewhat similar functionality with a more static look but at least it will show correctly as the Javascript calculation will not occur there.
Thank you.
ok, too bad. Thanks. Was hoping to get it working proper in parallax.