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

  • Profile Image
    stormingrobots
    Asked on February 19, 2020 at 09: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.



  • Profile Image
    JohnRex
    Answered 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:

    15821255802170198.gif

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

  • Profile Image
    stormingrobots
    Answered 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>

  • Profile Image
    JohnRex
    Answered 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 

  • Profile Image
    stormingrobots
    Answered on February 19, 2020 at 09: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> . 

  • Profile Image
    jherwin
    Answered on February 20, 2020 at 01: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.

  • Profile Image
    stormingrobots
    Answered 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).  

  • Profile Image
    JohnRex
    Answered 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" 

    onload="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 


  • Profile Image
    JohnRex
    Answered 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 

  • Profile Image
    stormingrobots
    Answered 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) . 

  • Profile Image
    JohnRex
    Answered on February 20, 2020 at 03: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.

  • Profile Image
    JohnRex
    Answered on February 20, 2020 at 04: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.

  • Profile Image
    stormingrobots
    Answered on February 22, 2020 at 06: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. 

  • Profile Image
    ashwin_d
    Answered on February 22, 2020 at 01: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.