Display problem with cover block

  • Hi,
    This entire site uses the cover block for page banners. The block has a background image and a color gradient overlay. The problem is that when the page renders the image flashes. The contact us page is the most obvious. Is this a symptom of using a gradient with an image, or is there a possible solution?

    Thank you.

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello, it could be because the background image in the Cover block is lazyloaded. Could we try and disable lazyloading just that one background image on the Contact page, clear all caches that the website might be using, and then reload the Contact page to see if the image still flashes. Good luck!

    Thread Starter Tim Burkart

    (@bigmoxy)

    Hi Gerry,
    Thank you for your response. I don’t know how to disable lazyloading for a single image so I disabled it in WP Rocket, cleared cache both locally and at my CDN but the image still flashes on most browsers. It flashes in Chrome both normal and incognito, and Firefox normal but not incognito.

    Is there a technique to disable background images?

    Hi, if the image on the Contact page is still flashing with WP Rocket lazyloading already disabled, then lazyloading might not be the issue.

    Anyway, to disable lazyloading a specific image using WP Rocket, please see … https://docs.wp-rocket.me/article/15-disable-lazy-load-on-specific-images

    There could still be something else at play concerning the Cover block on the Contact page. There are three versions of the same background image that have been added into a style attribute on the main Cover block element, so I’m wondering if that is a feature of the theme you are using on the website …

    <div class="wp-block-cover alignfull has-parallax is-alignfull-first" style="--background-image-sm:url(https://cohapoutreachcorporation.org/wp-content/uploads/2023/06/cohap-contact-us_v5-1024x512.jpg);--background-image-md:url(https://cohapoutreachcorporation.org/wp-content/uploads/2023/06/cohap-contact-us_v5-300x150.jpg);--background-image-lg:url(https://cohapoutreachcorporation.org/wp-content/uploads/2023/06/cohap-contact-us_v5-300x150.jpg);min-height:450px">

    I have highlighted the style attribute and the 3 versions of the background image in the code block above. That looks like it was added by the theme or a plugin. Can that additional style attribute be removed? You might need to check on the theme support forum. The theme is Mai Influence from BizBudding.

    Good luck!

    • This reply was modified 1 year, 3 months ago by Gerry. Reason: Corrected an error
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Display problem with cover block’ is closed to new replies.