0

Our web app has a background image attached to its body, with background-size: cover. This works fine on iPad, but when adding the app to home screen, the background is removed.

Removing "apple-mobile-web-app-capable" helps, but we need this feature.

I can't seem to solve this, and would really love some inputs.

App: https://mementor.easydays.me

Thank you!

Virik
  • 397
  • 1
  • 4
  • 18
  • Maybe this will help: http://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari – FrontMonkey Apr 27 '16 at 21:53
  • I'd rather use background-size, because it works with out apple-mobile-web-app-capable. I think something else is the reason for this failing? – Virik Apr 27 '16 at 22:07

1 Answers1

0

When I add the site to the home screen as a web app, and then click on the icon, the screen is white for a few seconds until the page loads, and then the background appears to load correctly.

The white background is used in place of a web app startup image, which you can specify like this:

<link rel="apple-touch-startup-image" href="/startup.png">

I recommend looking into Apple's Startup Images (more info on that here).

Does this solve your background image problem?

Jake Chasan
  • 6,290
  • 9
  • 44
  • 90