Issue with fixed image backgrounds on mobile devices

Design help General
1

Dear users, i have a problem or just don’t know how to fix this.

I have a project, where i want the background image to be “fixed” (Don’t move !!)

On PC browsers it is right, the image is fixed, but on mobile devices, the image is repeated through the scroll.

what i mean, what i see on mobile devices

768×1280 805 KB

what i see on designer, and preview:

364×1320 459 KB

project URL is suposed to be: http://antoniprats.webflow.io/

Thanks in advance for any help!

2

Hi @An4tomic1, thanks for the post. Could you share the site read-only link: Share a read-only link | Webflow University, it looks like you need to set the tiling property to off in the background image settings.

Cheers,
Dave

3

I think fixed BGs are not working on mobile browsers!

There are maybe some workarounds but the feature will definitively not work on any mobile device.

Fixes/Workarounds:
www.stackoverflow.com/questions/20443574/fixed-background-image-with-ios7
www.stackoverflow.com/questions/19045364/fixed-body-background-scrolls-with-the-page-on-ios7
www.github.com/louisremi/background-size-polyfill/issues/27

4

Hi @Daniel_Schultheiss, that is correct, there can be issues with fixed backgrounds and mobile browsers (sometimes), and not all mobile browsers handle the issues in the same way. I would love to still take a look at the read-only link, if you @An4tomic1 want still want to share :smile:

All the info helps us to better understand the issue :slight_smile: We don’t like these kinds of issues either :-/

Thanks for those workarounds @Daniel_Schultheiss, that really helps also :smile: Cheers,
Dave

5

here it is @cyberdave =)

https://preview.webflow.com/preview/antoniprats?preview=d791a037ff9f86e40269bb55d151aa1c

or atleast i hope i did it right >.<

6

here’s the link to my site
https://preview.webflow.com/preview/janellebrisson?preview=8e4e4892800e867365c5dcfbff3f9332

So in the preview mode it shows the image covering behind my menu. It looks correct on mobile preview.

499×733 155 KB

Here’s a screen shot on mobile where there is added white space on the top (not correct). I used minfy HTML to export.

640×1136 277 KB

Thanks for any advice/help!

7

on first state, i thought will was fault of my browser because, you know, windows phone uses internet explorer XD

I asked some friends/mates to look the page (IOs, Android) and the result was the same, so there’s why i finally suposed there will be some problem.

@Daniel_Schultheiss i do not had time already to take a closer look to that work arounds, but what you said looks like the possible problem :confused:

8

Hi @An4tomic1 and @janelle, I am able to reproduce the problem as pointed out by @Daniel_Schultheiss (thanks :slight_smile: regarding the fixed image background issues on mobile. We will have to followup the developments for this…

I next tried to find a simple workaround in Webflow, and came up with this:

http://mobile-fixed-background.webflow.io/
https://webflow.com/website/mobile-fixed-background (you can clone this also)

Could you test if the fixed background image works on your mobile?

9

Thanks @cyberdave.

I worked w/ @thewonglv from support earlier on this issue and what we produced properly works across all devices. Check out the current landing page site of https://webflow.com/website/mdftl (mdftl.webflow.io) to see how we accomplished this in lieu of the preview bug (keeping this site public for now at the time of this writing).

In http://mobile-fixed-background.webflow.io/, I see that the desired bkg image effect that we Webflow users are in need of when viewing from a mobile browser (Safari on an iPhone 5 in portrait or landscape mode in this case) is not produced. As follows:

When viewing http://mobile-fixed-background.webflow.io/ on an iPhone 5:

In portrait mode, the bkg image is un-proportionately skewed, as the image does not scale it to fill the bkg, plus the bkg image scrolls some upon scrolling with a bottom margin at times. In landscape mode, the same thing occurs, though the image is not skewed.

So the main issue here is that the Webflow preview shows one thing for tablet & mobile for the bkg image (and when we see that, we all usually agree with wanting that), but then that is different from what the actual browsers reveal, thus we cannot use the Webflow tools to properly design & utilize CSS to produce the desired bkg image effect - since we cannot properly preview it as we work.

Glad you guys are working through this bug and hopefully a permanent fix is released sooner than later. :thumbsup:

–
Dylan // Digital Liberation

12

Thanks @DLI, thanks for your comments, I will check the test site I made together with your comments. It is possible that example has some styling that need to be corrected in that example.

If you have worked with @thewonglv to create a layout that works for you, that is great :slight_smile: Thanks for the update :smile:

Cheers,
Dave