I would like to use a different image on mobile breakpoint to desktop breakpoint. When I change the image on the mobile breakpoint it also changes the desktop background image to the same.
Is there a way of having a different image on different breakpoints?
Hi, @user6760 !!
There might be a more efficient way, but one approach that comes to mind is using formFactor to detect mobile users and dynamically swap the image URL. ![]()
quickest way is to duplicate the section on desktop. rename it to mobile section and adjust the background and then hide it on desktop breakpoints. Then on mobile breakpoint hide the desktop section and show the mobile section.
Go to your mobile breakpoint, drag the mobile background image to your section (don’t set it as background just yet), and simply stretch it to full width. As easy as that.
I love this conversation! Perfect example of “there’s always more than one solution”!
Keep up the great solutions! ![]()
Hi,
Thanks for taking the time to reply and advice.
Many thanks for the info.
Many thanks for this option.
Hi Pratham,
I am new to web design and struggle on some of the basics, however, your method worked first time perfectly. I did have to start a new home page as my original home page image was a background image. A big thank you!
Hi Dan, works a treat, thanks!
You’re welcome! ![]()
If you ever get stuck or don’t know how to work your way around something, feel free to reach out to this awesome community! ![]()