Search code examples
htmliosweb-applicationsbackground-size

iOS Web App and Background-size


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!


Solution

  • 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?