-
stormingrobotsAsked 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 LeadReplied 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:
Let us know if you need further assistance with this, or let us know if you're referring to a different form.
-
stormingrobotsReplied 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 LeadReplied 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:
-
stormingrobotsReplied 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> .
-
jherwinReplied 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.
-
stormingrobotsReplied 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 LeadReplied 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:
-
John Support Team LeadReplied on February 20, 2020 at 12:00 PM
I'm sorry, here's the correct test website with the updated code:
-
stormingrobotsReplied 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 LeadReplied 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 LeadReplied 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):
I suggest accessing it via an incognito tab/private window to prevent cached displays. It works on both Chrome, Firefox, and Safari.
-
stormingrobotsReplied 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 SupportReplied 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.