Streaming live at 10am (PST)

iOS Fixed Background Image - not Fixed


#1

Anyone else having an issue with FIXED-BACKGROUND-IMAGEs on iOS devices ?

What I am seeing...

Testing with Safari and Chrome...
the background image is not stay put. ie: Not Fixed. It scrolls with the page.

I'm guessing - since this issue is occurring with both Safari and Chrome...
it's an iOS issue ?


#2

Hi @Revolution, yes, this is a common problem with iOS. There are workarounds, but probably the easiest thing to do, is to place a div directly under body, make it full cover, fixed position with a z-index of -1. Then assign the bg image to the div and do not place the fixed styling on the image, just the fixed div that the bg image is assigned to.

I.e. https://webflow.com/website/mobile-fixed-background

I hope this helps!


#3

I will give that a try. Thank you.


#4

Great, remember, you can stack div backgrounds on different z-index layers, and do funky things, like show and hide different backgrounds using scroll interactions at different sections :slight_smile: experiment :slight_smile:


#5

This topic was automatically closed after 60 days. New replies are no longer allowed.