Lazyload background images on <section> at different widths #949
Unanswered
davidcurtc34
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi there! Love lazysizes and its working perfectly for me on Desktop. I have applied data-bgset on section elements and lazysizes definitely works in deferring the load until scrolled down in the viewport. Unfortunately, on mobile, I am not able to get the bg image to switch to a different asset. I tried the following as an attribute on my section but its not fetching the mobile asset and swapping out.
data-bgset="https://t24movie.com/wp-content/uploads/2022/04/T24_Backgrounds_04-3.jpg 3998w, https://t24movie.com/wp-content/uploads/2022/04/T24_BackgroundsMobile_05-1.jpg 802w"
I followed the jellyfish example here --> http://afarkas.github.io/lazysizes/#examples but that seems more geared towards IMG sources versus background sources. Any guidance here would be super appreciated!
EDIT:
I also found this demo --> http://jsfiddle.net/trixta/bfqqnosp/
This was found from viewing this documentation --> https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset
Still can't get it to work on my site though :(
Beta Was this translation helpful? Give feedback.
All reactions