Return to previous page

Parallax effect not functioning with full image

This topic has 6 replies, 3 voices, and was last updated 8 months, 2 weeks ago ago by Andrew Mitchell

Ajaz

Participant

April 4, 2024 at 22:05

The parallax effect only functions when it is set to “fixed” and “contain” options applied and image width of 1950px.

My images is 2000px for width and height.

When I add my images, they are zoomed in with the fixed and contain options applied. I have tried all the image size built-in options and they still do not show the complete image but the parallax effect works.

Now, when I change the fixed option to default, this shows the complete image but the parallax effect stops working.

I have tried all the options and reduced the height of the image which fit the parallax image requirements but the issue exists.

How can this be replaced where my image is added with the contain and fixed option showing my full image and the parallax effect works?

Also, the parallax effect does not work on mobile, how can this be enabled?

#390123 Copied Theme version: 9.3.3

5 Answers

Luca Rossi

Support staff

April 7, 2024 at 14:37

Hi @Ajaz,

Please provide us with the URL of page you’ve added the parallax effect.

Thank you!

#390485 Copied

Ajaz

Participant

April 7, 2024 at 16:22

.

Please contact administrator
for this information.

#390509 Copied
Luca Rossi

Support staff

April 8, 2024 at 06:11
Hi @Ajaz,

Please setup the parallax options like this screenshot, it should work with any sizes of image.

https://prnt.sc/y6sTMyPUKY1S

Also, the parallax effect does not work on mobile, how can this be enabled?

The parallax scrolling effect is achieved by setting the background image position to “fixed” (background-attachment: fixed). At present, this effect is fully supported only by the Mozilla Firefox browser.

On touch devices using browsers other than Mozilla Firefox, the parallax effect is overridden to ensure compatibility. Consequently, users will observe a static image in place of the dynamic parallax effect.

The majority of mobile browsers do not support parallax scrolling due to issues related to responsiveness and performance concerns on mobile devices.

However, we have provided a workaround using custom CSS code. Please be aware that this custom CSS solution will not function on iOS devices. The following custom CSS has been added for your convenience under Page Settings > Advanced > Custom CSS:
```
@media only screen and (max-width: 768px) { 
    .elementor-widget-wrap.elementor-element-populated.lazyloaded {
        background-attachment: fixed !important;
    }
}
```
Should you have any further questions or require additional assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#390543 Copied
Ajaz

Participant

April 8, 2024 at 09:16

This is ok, thanks, Luca.

Topic resolved.

#390580 Copied

Andrew Mitchell

Support staff

April 8, 2024 at 09:16

Dear Ajaz,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#390581 Copied
Tagged: full image parallax, parallax effect issues, parallax functionality problems, parallax woocommerce fixes, woocommerce, wordpress parallax solutions, wordpress templates
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Parallax effect not functioning with full image’' has been successfully resolved, and the topic is now closed for further responses

Parallax effect not functioning with full image

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection