Streaming live at 10am (PST)

Fixed background picture doesn't work on iphone5 safari


#1

i set the background picture to "fix", but it seems not work when i open with my iphone5.
is there something i don't know?


Fixed background image in mobile
Body background image
Background video - Fixed image for tablets
#2

Hi @zfe - thanks for the question! At the moment, Webflow automatically disables background-attachment: fixed; for mobile devices because IOS7 has a rendering bug that makes them appear completely distorted in certain situations.

Are you exporting your site or hosting on Webflow? If you are exporting, there is a workaround I can suggest, but it might cause your background images to be broken on other devices (e.g. iPad landscape), especially if you set your background size to the 'Cover' setting.

(See this thread for a bit more background: http://forum.webflow.com/t/fixed-background-picture-doesnt-work-on-iphone5-safari/1222)


#3

Hello! Is there a fix for this yet? The fixed background doesn't work on iPad either (on iOS 7 of course). I've seen other websites that work on iOS 7, so was this patched and webflow hasn't updated yet? Thanks!


#4

Hello, I am giving a background image to my website which is static & will be covering the whole page.
Its working fine on the desktop version, however in iPhone & iPad it gets scrolled with the page. How to make it stay at its place on mobile devices? Thanks.
Sample can be viewed here http://measgreendemo.webflow.com


#5

Hi gang, quick update on this topic.

We are still disabling background-attachment: fixed on touch devices because of poor iOS support.

However, you may want to try the following workaround to achieve a fixed background on mobile:

  1. Style your Body height to 100%.
  2. Create a Div Block wrapper, giving it a class (e.g. "fixed wrapper")
  3. Set the Div's position to fixed using the Advanced position panel.
  4. Click the full button just below, so that it fills the screen.
  5. Finally, set the z-index of other elements to be above this wrapper.

(In order to set the z-index of another element, you will need to set its position to Relative or Absolute)

You may then style the "fixed wrapper" as you would any other element, including its background image- and it will remain fixed behind the rest of your content.


Fixed background on mobile doesn't work; horizontal line going through page
#6

Is it still bugs with fixed background on iOS devices? Need that feature very much frowning


#7

Can you guys please enable this and give us the option to disable it? This limitation makes me want to use squarespace instead.


#8

yes... please enable this feature!


#9

fixed background on ipads not working also.


#10

Any updates here? I'm also having a buggy experience on iOS when using a background image fill.


#11

This still doesn't work.

Has anyone out there found any acceptable solution for mobile? Every single solution I have seen is clunky.


#12

Hi, this issue with iOS is still an issue. The workaround provided by @danro is still the best solution for using fixed bg images on iOS.

See this recent topic where the workaround was used for the fixed image background: http://forum.webflow.com/t/issue-with-fixed-background-image-on-ipad-ios/16847

Here is also a site I made a while back, with an example of a fixed background that work on iOS: https://webflow.com/website/mobile-fixed-background (site is cloneable).


#13

Hi Dave, thanks for the reply.

Have you got any advice for keeping this kind of fixed background effect in webflow for mobiles?

https://preview.webflow.com/preview/fressko?preview=f7d37337afe92177734706a805acd03d

It's weird that webflow disables this, yet in mobile view it works perfect.

I feel like I have tried everything at this point to have this kind of effect work on ipad and mobiles. because IOS disables scroll events while a user scrolls, it look clunky being updated once the user stops.

Never thought such a simple thing could be so tricky.

In addition, is there a way to parallax the background too like a twitter header ?


#14

Hi @Fagan_Wilcox, thanks for your followup. I am not sure what you mean by "yet in mobile view it works perfect.". Fixed backgrounds on mobiles due to poor support for it on ALL mobile devices -- this is the issue smile

Things are design dependent too, so depending on your design, will affect how well it works.

I will take a look at your read-only link smile

Cheers,
Dave


#15

Have similar issue. fixed background works on my windows xp desktop but doesn't work on my HP Elitebook windows 10.


#16

Is this still the best workaround for this? I am having the same trouble. It seems to me that this would be a huge priority since this has been an issue for 2 years. I am new here. Webflow is such a great responsive platform, yet my site looks terrible on mobile devices because of this issue. :frowning:


#17