Home › Forums › WoodMart support forum › Hero image as background image has a little shock when loading or refreshing

Hero image as background image has a little shock when loading or refreshing

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 6, 2025 at 11:49 pm #643641

    marco
    Participant

    Hello,

    On almost every page of my website I make use of a hero image. They always have a size of 1920×822 and are set as a background image in the Row Settings.
    For some reason when loading a page, or refreshing the page, the image makes a little shock/movement/jump before reaching it’s final position.

    How do I get rid of this little shock and how do I get the image to load nice and smooth?

    March 7, 2025 at 7:01 pm #643966

    Hung Pham
    Keymaster

    Hi marco,

    Thanks for reaching to us.

    Can you please disable Parallax image effect and check again to see if it shows correctly?

    Regards,

    March 7, 2025 at 7:24 pm #643974

    marco
    Participant

    Hi Hung Pham,

    Thank you for getting back to me.
    When I disable Background Parallax in Row Settings > Design Options it shows correctly, without the little shock.
    But it changes the viewport, at mobile screen it will only show a very small section of the image.

    Regards,

    Marco

    March 10, 2025 at 9:42 am #644325

    Hung Pham
    Keymaster

    Hi marco,

    Thanks for your patience.

    It’s hard to use same background image for all devices. So, I kindly recommend you preparing images you want before uploading them to your media library using the graphic editor (Photoshop or any other) to have a nice-looking grid on mobile devices.

    And with the help of Theme Presets, you can select Is Mobile condition.

    Then, go to Theme Settings > Page Title and add background image for mobile devices.

    Check our article about theme preset – https://xtemos.com/docs-topic/theme-settings-presets/

    If you have any questions, let me know.

    Regards,

    March 14, 2025 at 2:51 pm #645918

    marco
    Participant

    Hi Hung Pham,

    Thank you for getting back to me.
    Please note that every page has a different hero image as a background image on top of the page, see the Private content area. The row also contains a Text Block and Section Title.
    When I switch off the Background parallax the little shock/movement/jump when loading or refreshing the page is gone, that’s true.

    But what I would like to have is the situation as I already have now, including parallax, Text Block and section Title, without the little shock/movement/jump.

    If I follow your suggestions to make use of the Theme Presets and select the Mobile condition, and Then go to Theme Settings > Page Title and add background image for mobile devices, every page will have the same image I assume? And what about the parallax effect and the texts over the background image, which I created with the help of Text block and Section Title?

    Maybe we didn’t understand eachother, but I jus want to get rid off the shock/movement/jump when loading or refreshing in order to have this smooth…

    Kind regards,

    March 17, 2025 at 8:54 am #646263

    Hung Pham
    Keymaster

    Hi marco,

    First of all, I am appreciate your patience.

    Could you please record a short video and describe how we can reproduce the issue on your website so we can check this for you?

    Regards,

    March 18, 2025 at 1:31 pm #646754

    marco
    Participant

    Hi Hung Pham,

    You can reproduce the issue by refreshing the pages of the URL’s I sent you before, or watch the video’s I made, please see the Private content.

    Kind regards,

    March 19, 2025 at 1:11 pm #647169

    Hung Pham
    Keymaster

    Hi marco,

    Thanks for videos.

    It worked perfectly on my end, you can see recorded video

    Please let me know if you resolved it https://go.screenpal.com/watch/cTeq6Qni6J1

    Best Regards,

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)