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
-
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