How to keep page background image stayed fixed with collapsible tabs?

  • stormingrobots
    Asked on February 19, 2020 at 9:17 AM

    see  200284540480145

    When I click on each tab, the background image kept changing. Would you tell me how to keep it fixed.  I have played with various setting like 

        position : fixed;

        background-size : repeat  <--  I have tried various setup .. still won't work. 

    Please advise.



  • John Support Team Lead
    Replied on February 19, 2020 at 10:22 AM

    If you're referring to this form: 200284540480145, it seems you already managed to inject the correct CSS codes for the image background:

    How to keep page background image stayed fixed with collapsible tabs? Image 10

    Let us know if you need further assistance with this, or let us know if you're referring to a different form.

  • stormingrobots
    Replied on February 19, 2020 at 10:35 AM

    no it does not work after I used the embedded script  

    <script type="text/javascript" src="https://form.jotform.com/jsform/93035603341145"></script>

  • John Support Team Lead
    Replied on February 19, 2020 at 12:47 PM

    Please try replacing your existing code instead with this one:

    html.supernova {

        background-size: 100% auto;

    }

    I have tried embedding your form on my test website using the script embed method and here's how it looks when I used the above code:

    http://rex-testing.rf.gd/?i=1 

  • stormingrobots
    Replied on February 19, 2020 at 9:11 PM

    No, it does not work. Did you use chrome , or IE, or Edge?  the background of html page did not stay in place. It tested yours as will on these browsers. The background also scroll at these browsers.

    Try this: https://www.stormingrobots.com/prod/campreg.html .. I embedded your script  <script type="text/javascript" src="https://form.jotform.com/jsform/93035603341145"></script> . 

  • jherwin
    Replied on February 20, 2020 at 1:24 AM

    Can you please try the iFrame embed code?

    Guide: Getting-the-Form-iFrame-Code

    Please give it a try and let us know if that could work for you.

  • stormingrobots
    Replied on February 20, 2020 at 10:32 AM

    no.. it has the same issue.. -see https://www.stormingrobots.com/prod/campreg.html.

     If it works only on firefox (<4% of web share) ,  i think  jotform really needs to fix this at least chrome (65% of web share).  

  • John Support Team Lead
    Replied on February 20, 2020 at 11:59 AM

    It seems this is an issue with the auto-height script with the iframe code. Please try using only the iframe code and get rid of the auto-height script. Here's the example code for my form without the script part:

    <iframe id="JotFormIFrame-200494733666966" 

    title="Clone of 2020 Summer Camp Registration Form" 

    onDISABLEDload="window.parent.scrollTo(0,0)" 

    allowtransparency="true" 

    allowfullscreen="true" 

    allow="geolocation; microphone; 

    camera" src="https://form.jotform.com/200494733666966" 

    frameborder="0" style=" min-width: 100%; 

    height:4369px; border:none;" 

    scrolling="no" > 

    </iframe> 

    I have tried this on my test site and updated the code there to only use the iframe part:

    http://rex-testing.rf.gd/?i=1 


  • John Support Team Lead
    Replied on February 20, 2020 at 12:00 PM

     I'm sorry, here's the correct test website with the updated code:

    http://rex-testing.rf.gd/?i=2 

  • stormingrobots
    Replied on February 20, 2020 at 12:25 PM

    the background in http://rex-testing.rf.gd/?i=2  still scrolls in chrome. Did you test it out with Chrome - Version 79.0.3945.130 (Official Build) (64-bit) . 

  • John Support Team Lead
    Replied on February 20, 2020 at 3:03 PM

    You were right. The background image still scrolls instead of being fixed.

    Let me conduct further tests on this and get back to you shortly.

  • John Support Team Lead
    Replied on February 20, 2020 at 4:36 PM

    Hi again - So I fiddled with the CSS codes in the cloned form. It works for the direct link of the form, but not when you embed it.

    So I came up with a workaround to add the background image directly to the webpage.

    First, set the background of the form to none:

    .supernova{

      background: none!important;

    }

    Then on your website's source code, place this code inside the <STYLE> section:

     html { 

      background: URL("https://www.jotform.com/uploads/JohnRex/form_files/simpleGear.5e307ef047c047.80856376.jpg") no-repeat center center fixed; 

      -webkit-background-size: cover;

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

    }

    This will be the result (please disregard the form theme as I removed it while testing):

    http://rex-testing.rf.gd/?i=2 

    I suggest accessing it via an incognito tab/private window to prevent cached displays. It works on both Chrome, Firefox, and Safari.

  • stormingrobots
    Replied on February 22, 2020 at 6:57 AM

    Please do send out notification when this background image issue is fixed. From now on, I'll just give up on background image then. 

  • Ashwin JotForm Support
    Replied on February 22, 2020 at 1:26 PM

    I would suggest you to please remove the background image of your form and then inject the following custom css code in your form to see if that solves your problem:

    .supernova {

        background: url(https://www.jotform.com/uploads/stormingrobots/form_files/simpleGear.5e307ef047c047.80856376.jpg) !important;

    background-repeat: no-repeat !important;

        background-position: center top !important;

        background-attachment: fixed !important;

    }

    Do try it out and get back to us if you have any questions.