What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Help with background image scaling on iPhone 5

    Asked by lenardchengtw on June 10, 2016 at 11:10 PM

    Thanks in advance for help. Wanting to upgrade but only if this problem is resolved. 

     

    I made a background with  translucent form on top. Made the background fixed so that it stays as the background when scrolling up and down the form. It's working so far except two problems:

     

    1: on iPhone 5s it renders the background in a different dimension (see attached as compared to viewed on other devices) and the photo looks twice the size and unpleasant. It looks fine on Samsung and iPhone 6s/iPad etc. How do I standardise the background scaling?

     

    2: on the thank you page, Samsung and android phones render a background that is the JPEG photo repeated twice. iPhone renders it accurately as one photo background.
     

     

    3: on some devices, when I scroll down , the background enlarges slightly (less important than 1&2)

     

    Thanks for your help

    L

    Page URL:
    https://form.jotform.me/lenardchengtw/78

    Screenshot
    Mobile different mobile device platforms
  • Profile Image
    JotForm Support

    Answered by Boris on June 11, 2016 at 09:00 AM

    Glad to hear you like our services. I see that the form you are having troubles with is form 61611719453455, named Lenard and Hui-Fen Wedding RSVP.

    I have taken a look at this form, and I can see the issue you are describing - iPhone 5 is incorrectly scaling the background image. Upon taking a much closer look, this seems to be an issue caused by iPhone 5, rather than having anything wrong in your existing CSS or with the image.

    Please try injecting the following custom CSS into your form, and see if it helps with the incorrect image scaling on iPhone 5:

    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
      .supernova {
        background-size: cover;
        height: 100%;
        overflow: hidden;
      }
      body { 
        height:100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
      }
    }

    You can add CSS to your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The above provided workaround seems to have resolved this peculiar issue on my tests, but please do check and let us know how it goes on your end as well.

    When it comes to the issue regarding having a double image on your thank you page, that concern has been moved to a support thread of its own, so we can avoid confusion with the topic of this current thread. That support thread is here:

    https://www.jotform.com/answers/858624

    We will be assisting you with it there, shortly. Thank you.