Hi,
Here are a few things you can try to fix this:
1. Disable “Lazy Load” for the Background Image If you are using an optimization plugin, it might be “lazy loading” the background image. Since this image is likely “above the fold” (visible immediately), lazy loading causes it to pop in late.
2. Set a Minimum Height with CSS If the container doesn’t have a defined height until the image loads, the browser won’t know how big to make it. You can force a height via Appearance > Customize > Additional CSS:
.header-filter {
min-height: 80vh; /* Adjust this value based on your needs */
}
3. Image Size & Format If the image file is very large, the browser might render a placeholder or a partial version first. Ensure your background image is compressed (ideally under 200kb) and in a modern format like WebP.
Kind regards!
It doesn’t work. I’ve done everything you wrote. The problem doesn’t just occur with the cover image, but with all headers, including categories, pages, etc., and ONLY on desktop; it works fine on mobile.
Hi,
Thanks for the follow-up. What you’re seeing is due to how the theme’s header script calculates the screen dimensions to ensure the background fits perfectly across different devices.
Because the theme builds the header area dynamically as the page loads, there can be a brief moment where the image adjusts itself once the final layout is calculated. This behavior is tied to how the theme ensures the header remains responsive and correctly aligned with the menu and site title.
Unfortunately there isn’t something I can suggest here.
Kind regards!
