Parallax image won't show on front-end

De background image sometimes won’t show up (in theme: Spirit) in the live site (shows white background) when choosing parallax background-type for that region, while the background is shown in the upfront editor. However in both, the “draggable elements” are visible.

When i hard refresh the page, the background image is shown for 2 seconds. Then a “display: none” appears on the div:

<div class=”upfront-output-bg-overlay upfront-output-bg-image upfront-output-bg-desktop upfront-parallax” data-bg-parallax=”.upfront-bg-image” style=”display: none;”><div class=”upfront-bg-image upfront-image-lazy upfront-image-lazy-bg upfront-parallax-element upfront-image-lazy-loaded” style=”top: -30px; bottom: -30px; background-image: url(http://…..jpg); background-size: 0px 0px; background-position: 0px 0px;” data-src-desktop=”//” data-bg-image-ratio-desktop=”0.67″ data-src=”//…..jpg” data-bg-image-ratio=”0.67″></div></div>

Maybe it’s closely related to, my bug report:

  • Sajid
    • DEV MAN’s Sidekick

    Hi @frank_oonk

    Hope you are doing good today :slight_smile:

    I tested the parallax background on my own sandbox site and its seems to be working fine to me. In both upfront editor and also on front-end. I checked on mobile and its seems to be working fine there too.

    Do you get any error message in console ? If yes then post that here. Can you post the link of page where you used parallax background image.

    Also try to deactivate other plugins to make sure its a conflict as stated in our getting support manual (flowchart).

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.