I’m having an issue with background images on my iPad.
The BG image loads normally on Desktop, Tablet (portrait) and both mobile options as tested.
When I turn the iPad to landscape, the BG image cuts off halfway down the page and doesn’t fully display.
I suspect this has something to do with the screen size because, in landscape, the nav bar is fully displayed despite being set to being a button only and the full bar should only be visible on desktop so I think the issue is the screen is large enough to register as a desktop but the device is registering as a tablet and Webflow doesn’t know which CSS to implement.
I just don’t know how to fix that
Hi there,
Background image display issues can be resolved by adjusting a few key settings in the Style panel:
The background size property offers two main solutions:
- “Cover” fills the entire container while maintaining aspect ratio (may crop some edges)
- “Contain” fits the entire image within the container (may leave empty space)
For precise positioning, you can also adjust:
- Background Position: Use the X and Y axes controls with px, %, VW, or VH units
- Background Repeat: Choose whether the image should repeat to fill empty spaces
- Background Attachment: Set to “Fixed” for a parallax-like effect, or “Scroll” for standard behavior
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Thanks for the response!
This issue was actually a problem with the native breakpoints in Webflow. My tablet (5th gen iPad) is larger than 991px when in landscape mode so the site was trying to render in desktop which doesn’t work on a tablet.
I was able to resolve it by adding custom breakpoints, thanks to this post “Custom breakpoint workaround for styles and interactions”