How do I make the background image not to scroll along with the form?

  • Profile Image
    lharriman
    Asked on July 12, 2016 at 01:07 PM
    I want the form to scroll but the background image to remain fixed. Can you help me with this?

    thanks,

    lucas 

  • Profile Image
    Kiran
    Answered on July 12, 2016 at 01:18 PM

    I have checked your JotForm https://form.jotform.com/61907964818975 and see that the background image is fixed and only the form is scrolling on both mobile and desktops. Please see the screencasts below:

    You may set the background to be fixed from the Form Designer.

    Hope this information helps!

  • Profile Image
    lharriman
    Answered on July 12, 2016 at 03:37 PM

    I still have it working on my desktop but not fixed on my iphone. Here is a screenshot from my phone:

  • Profile Image
    lharriman
    Answered on July 12, 2016 at 03:45 PM
    I know it's working on desktops, but it still doesn't remain fixed when I access to form on my iPhone. I'll attach a screenshot.
    Thanks for your help.
    -LHH
    ...
  • Profile Image
    Kiran
    Answered on July 12, 2016 at 03:58 PM

    I'm able to replicate what you mean using an iPhone emulator. It seems to be working fine on Android devices. Please allow me some time to check on this and get back to you.

    Thank you for your patience.

  • Profile Image
    lharriman
    Answered on July 13, 2016 at 05:05 PM

    Any progress on this question? I was hoping to publish the form tomorrow if possible.

    Thanks,

     

  • Profile Image
    jonathan
    Answered on July 13, 2016 at 06:54 PM

    Can you please try replacing the existing CSS codes of your form https://form.jotform.com/61907964818975   with this codes.

     

    .form-section {

        background : transparent !important;

    }

     

    #id_3 {

        width : 100%;

    }

     

    .form-checkbox-item label, .form-radio-item label {

        white-space : normal;

    }

     

    @media screen and (max-width: 480px){

        .supernova {

            background-image : url("https://www.jotform.com/uploads/lharriman/form_files/gold_medals.jpg");

            background-size : cover;

            height : 100%;

            overflow : hidden;

        }

     

        body {

            height : 100%;

            overflow : scroll;

            -webkit-overflow-scrolling : touch;

        }

     

    }

     

    I used this on a cloned form and it was working with the background static on mobile browser.

    Let us know if still did not work for you.

  • Profile Image
    lharriman
    Answered on July 13, 2016 at 07:45 PM
    That worked. Thanks! You guys are amazing.
    ...
  • Profile Image
    jonathan
    Answered on July 13, 2016 at 08:50 PM

    Thank you for the confirmation it works. We are glad to be of help.

    Contact us anytime for any assistance you need on JotForm

    Cheers