Hello community,
I’m new to Wix and I’ve been struggling with making my website fully responsive. The issue I’m facing is with background images—on some screens, parts of the image get cut off. For example, on larger screens, everything looks fine because I’ve placed everything within the framework to make it visible. However, on smaller screens, sections of the image start getting cut off, and it ends up looking bad.
I’ve set the height of my sections to 650px, which works well on most common screens, but on smaller ones, it’s not ideal. I’m wondering if there’s a solution to make the images display correctly across different screen sizes—whether large or small—without cutting off any important parts.
Any recommendations would be greatly appreciated, as this is the last hurdle I need to overcome to complete my website.
Thank you so much for your help!
Hi. I’m assuming these are images added as backgrounds to sections, correct? And that all fully span the width of the browser?!? If so, those do default to ‘Scale to Fill’ by default so they completely fill the section, which is what people typically desire. You are able to manually set the ‘Focal Point’, which takes some fidgeting but can help a bit.
The issue is you’re setting your section to a fixed height (650px), but the width will be completely variable depending upon the width of the browser someone is viewing on. So the background image has to do SOMETHING to fit all these different aspect ratios, and it does this by filling them with the ‘focal’ point trying to stay centered as much as possible. So sometimes you have to play with how to crop images so important content can stay more central in the image and/or adjust the aspect ratio so the compromises are most suitable.
The only way you could ensure your images are never cropped, regardless of the browser width, would be to have a variable height to the section as well so the aspect ratio of the section matched the image. But this may not work if you have other content in the sections that wouldn’t fit the resulting heights (e.g., the content would overflow a shorter height). If you want to try this, set the section height to a proportion of the browser width using ‘vw’ as the measurement. So, for example: if your image is 1920px by 1080px, the ratio/height would be: 1080 / 1920 = .5625 (or 56.25%). So set height to ‘56.25vw’.