- Posts
Hi,
Some background images have suddenly disappeared from my website homepage. A white background or a default image from my WP theme is displayed instead. After a lot of testing, I found that the problem comes from Lazy Load Images. I want to use effectively Lazy Load on my background images. How can I solve this? Could the issue be in the code of my WP theme? Or is it on W3 Cache Total side? My server?
Thanks for your help!
Hello,
Thank you for reaching out and I am happy to help!
The W3 Total Cache can also process background images and lazyload them. In some cases, the theme or some other plugin, or the way those images are added are also lazyloading those images, and doing this with the W3 Total Cache also can cause conflict, for example:
div class="footer-content lazy" style="background-image: url("https://guillaumelaccordeur.ca/wp-content/uploads/2021/06/Pied-dune-pianiste-et-pédales-du-piano.jpg");" data-bg="url("https://guillaumelaccordeur.ca/wp-content/uploads/2021/06/Pied-dune-pianiste-et-pédales-du-piano.jpg")" data-was-processed="true"This being said, you can try and disable the option in Performance>User Experience Process background images which will prevent W3 Total Cache from lazyloading them, and if that does not work, simply add the URLs of those images to Performance>User Experience>Exclude words: field. Make sure to save all settings and purge the cache after each setting is changed.
I hope this helps!
Thanks!
Hello Marko,
Thanks for your quick response.
I see, my theme is already lazyloading my background images. But it’s strange because they don’t behave the same way.
For example, here the background image is displayed :
<div class="footer-content lazy" style="background-image: url("https://guillaumelaccordeur.ca/wp-content/uploads/2021/06/Pied-dune-pianiste-et-pédales-du-piano.jpg");" data-bg="url("https://guillaumelaccordeur.ca/wp-content/uploads/2021/06/Pied-dune-pianiste-et-pédales-du-piano.jpg")" data-was-processed="true">And here the background image is not displayed :
<div data-label="Content" data-id="content--5" data-export-id="content-1-materialis" data-category="content" class="content-1-materialis content-section content-section-spacing-large lazy" id="content-5" style="background-color: rgb(255, 255, 255); background-size: cover; background-position: center top; " data-bg="url("https://guillaumelaccordeur.ca/wp-content/uploads/2021/06/Plan-rapproché-des-cordes-et-étouffoirs-dun-piano-à-queue-e1631829921611.jpg")" data-was-processed="true">Yet both class are written with “lazy”…
So I disable Process background images in W3 Total Cache. And now every background images are displayed 🙂
Thanks!
- The topic ‘Can’t use Lazy Load Images for background images’ is closed to new replies.
