X Pro Image Parallax Effect Issues

Support
#1

Hi there,

I am trying to get the home page effect similar to this Etho 2 demo. However, my background images were scaled down. I searched your recommendation which recommended to add Gap elements. I still couldn’t get the images expanded to normal scale.

The parallax effect was set at 250%.

Would you be able to help with this issue please?

www.dev.soillandfood.com.au

Thank you.
https://www.dev.soillandfood.com.au/home/?preview_id=336&preview_nonce=d94d10aa4e&_thumbnail_id=-1&preview=true

#2

Hi,

You can try setting the background size to contain.

Please note of the following

Background Size Property values

cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

contain - Resize the background image to make sure the image is fully visible

For more information kindly refer to the links

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

Hope this helps

#3

Hi Paul,

I am sorry the images remain not what I expect. I would like to get the images display similar to the Ethos2 demo that is an image covers full screen. Through this link, size and position of the first image was set as “cover”, the image didn’t show properly. The image was cut off. But size and position of the other images were set as “contain”, they are too small.

Thanks.

#4

Hi There,

Thanks for writing in!

To get exact effect as Ethos 2 Demo please use Classic section instead of V2 section.
To add classic Section hold ctrl key and add the new section.

Then add image background to the section and enable parallax.

It will act like the demo.

Hope this helps!

#5

Hi,

I still have the same problem though I used Classic section. The image didn’t display in full. Please find the screenshots through this link.

Thank you.

#6

Hi Suwanna,

That is because your section has no height (no content), background-images height depends on its section content.

Please add a CLASSIC GAP element on your section and adjust the gap size accordingly.



Hope it helps,
Cheers!

#7

Hi there,

Thanks. It works now.

Kind Regards,

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.