Question: Whenever I add a background image in the mobile/desktop/tablet version, it reflects to all breakpoints, so I can’t add a separate background image to one version, what should I do?
I am using Wix Studio
Hi, Omar_Ghazi !!
I just tried it, and indeed, it seems that the background image changes are reflected at all breakpoints. I had expected that the desktop change would serve as the foundation, and the other breakpoints could be changed freely, so it was a bit surprising. However, I think what you’re trying to achieve can be done in other ways. By using Velo code, it’s probably possible to write a code that changes the background image (.background.src) of the target section depending on the window size. If your breakpoints are just the three basics—PC, tablet, and smartphone—you can determine the device using the formFactor value. If you’re setting more detailed breakpoints, you could probably use getBoundingRect() to get the window size and apply conditional logic.
However, this method won’t handle cases where the window size changes after the page has been opened. If you want to go that far, you’d also need to implement an event to detect when the window size has changed. But, it’s possible that we just haven’t found it yet, and the Wix Studio editor might have a simpler feature to set different backgrounds for each breakpoint. I think a bit more investigation is needed. If you figure out how to do it, please let me know! 
Also, to mention a simpler method, you could prepare three separate sections for each breakpoint within the desktop breakpoint, and then hide the unnecessary sections at the other breakpoints. 
Hello! Thanks for your reply mate!
I decided to add my background image as a usual image for my desktop version, then hide it on the other versions…and it seems to work for me!
1 Like