Mobile Background Bug: Image Cuts Off on Scroll (Worked Fine w/ Background Vid Yesterday)

Design help General
1

Hey all,

I’m running into a weird issue with a background image on mobile that didn’t exist until recently…and I’ve already burned 2 hrs trying to fix it.

Context:

I originally had a background vid running on my homepage (applied to the Body or a wrapper), and it worked perfectly fine on all devices.

Yesterday, I swapped the vid out for a static background image.

On mobile, the background image either gets cut off halfway down the page, or it completely blocks scrolling if I set it to Fixed.

Meanwhile:

  • Designer + Preview mode = looks perfect
  • Published version = broken background rendering on mobile only

What I’ve tried:

  • Applied image directly to Body, then moved it to a dedicated backgroundImage div
  • Styled it:
    • Position: absolute
    • Top: 0, Left: 0, Right: 0, Bottom: 0
    • Width: 100%, Height: auto (or unset)
    • Z-index: -1, Pointer-events: none
  • Made sure Body or top-level wrapper has position: relative
  • Tried using 100vh, 100%, auto, and min-height on various wrappers
  • Set the background to Cover, Center, No Repeat, Not Fixed on mobile
  • Removed all overflow: hidden
  • Tried both Fixed and Scroll background settings on desktop + mobile views

The background vid that was there before this caused zero issues. But ever since I switched to an image, it’s acting like Webflow forgot how to render scroll backgrounds on mobile.

Is this a known issue?
Does Webflow support full-screen mobile background images anymore without JavaScript?
Anyone have a working setup for a background that stretches across the entire page height and plays nice with scrolling on mobile?

Checkout writeoasis on mobile to see what I mean by this.

Thanks in advance

2

Hey @William_McCalla,

Found that the following styling is applied for touch based devices which overrides the rule you have set for the background image via the designer.

html.w-mod-touch * {
    background-attachment: scroll !important;
}

So, that’s probably why you are experiencing this issue on mobile devices. You could make sure that your styling overrides the above on smaller devices and it should probably work.

3

Thank you so much AJ_Dev!!!

This did fix the problem. I also managed to find a temporary work around in the meantime because I needed a win LOL.
I set the image to sticky, z-index -1. But it required me to move my wrappers into a negative margin.

1 Like