Show different background image for desktop and mobile

[kaochihhui]

Hi Alvaro,

Thanks for the powerful library! It's really cool and amazing.

There is a situation we encounter:

The background image shown in desktop has very long width, thus in mobile the same image can not be used as the image will be shown weird.

Therefore we are thinking to use different images for desktop and mobile.

However if there are 2 images per slide (there will be around 40 slides), it will cause heavy loading.

We know that html5 "picture" tag can do the trick that only load the required image for either desktop mode or mobile mode.

Is there a similar way can be done in fullpage.js which will ease the loading?
Please kindly advice.

Thank you.

[alvarotrigo]

• Use media queries instead. The issue with srcset is being treated in this other topic.
• Use the state classes added to fullpage.js or the callbacks to load backgrounds dynamically. See this answer.