Hi everyone,
I’m having an issue with background images in a responsive app with both mobile and tablet layouts.
This is not happening on just one or two screens. It affects all of my screens.
The weird thing though, is that the editor scales along, but the preview isn’t (screenshots added)
Right now, the backgrounds are set at screen level. On mobile they can look correct, but on tablet the same background images do not scale or crop the way I want. The composition changes, parts of the image get cut off, and the result looks inconsistent across layouts.
Since this affects the entire app, I’m trying to understand what the correct approach is.
Should I avoid screen-level background images altogether when working with mobile and tablet layouts? Is it better to use image components as backgrounds instead? And if so, is the best practice to use separate background images for mobile and tablet?
I’m looking for the cleanest and most scalable way to handle this across all screens without distortion, bad cropping or heavy loads due to massive photos.
Thanks in advance.
Steven