Background image disappears in tablet/mobile view

I am using the background and Parallax – Royal Addons feature on all pages of my site, with most of them having 2 sizes for responsive views:
? the first container is set to display in Desktop & Laptop view while hiding in Tablet & Mobile view.
? the next container row has a smaller image and is set to display in Tablet & Mobile only.

There are no issues on the home page, but on other pages, the image disappears in the following conditions:
? There is more than one container (row) as described above.
? It is viewed in the Tablet or Mobile responsive mode.
? It is viewed in either Safari or Edge browser.

In the browser development tools Elements tab of the Inspector panel, the <div> for the top row has bg-image="/wp-content/uploads/header-image-1.jpg" and data-jarallax-original-styles='background-image: url("/wp-content/uploads/header-image-1.jpg");'.

But in the second <div> row, it is empty. bg-image="" and data-jarallax-original-styles='background-image: url("");'

I have tried deleting the image and re-uploading again from the media library, but it doesn’t do anything other than break the Header text styling for the container as well. Sometimes I have to recreate the first row just to get the functionality back.

I’m confused as to why the image URL is not being applied in the <div> container code, and why making and applying changes usually breaks the parallax background image and the Header text styling.

• This topic was modified 1 year, 6 months ago by curiousonepdx.

The page I need help with: [log in to see the link]