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

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

    thanks,

    lucas 

  • Kiran Support Team Lead
    Replied on July 12, 2016 at 1: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:

    How do I make the background image not to scroll along with the form? Image 1 Screenshot 40

    How do I make the background image not to scroll along with the form? Image 2 Screenshot 51

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

    How do I make the background image not to scroll along with the form? Image 3 Screenshot 62

    Hope this information helps!

  • lharriman
    Replied on July 12, 2016 at 3:37 PM

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

    How do I make the background image not to scroll along with the form? Image 1 Screenshot 20

  • lharriman
    Replied on July 12, 2016 at 3: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
    ...
  • Kiran Support Team Lead
    Replied on July 12, 2016 at 3: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.

  • lharriman
    Replied on July 13, 2016 at 5:05 PM

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

    Thanks,

     

  • jonathan
    Replied on July 13, 2016 at 6: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.

    How do I make the background image not to scroll along with the form? Image 1 Screenshot 20

    Let us know if still did not work for you.

  • lharriman
    Replied on July 13, 2016 at 7:45 PM
    That worked. Thanks! You guys are amazing.
    ...
  • jonathan
    Replied on July 13, 2016 at 8: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