Background image for form has spacing when viewed on mobile.

Hello I would like my page background image to fill the entire background of the form and stay still while a customer scrolls through the form. Currently it seems like the best settings for this are having "fixed" and "cover" checked. However when the form loads on an iPhone or iPad the photo splits in the middle section leaving a white bar behind the middle of the form. It only appears properly when you rotate the iPhone or tablet to landscape orientation and then back to portrait. Can you please let me know how to fix this? Ive attached a screen shot, I have more examples but this only lets me upload 1 photo at a time. I have included the form link below.

I tested on desktop and mobile. It seems that the background repeats itself at the moment.

Can you please try to uncheck the "Repeat" box in the settings in the Advanced Designer and test again?

This will make the form to slide over the background. Let us know, if this helps.

We will wait for your response.

This does not work, I have tried every combination of the options.Micaela Cook | General Manager805-541-55333583 S. Higuera St., San Luis Obispo, CA 93401www.qualitytintingandsigns.comCheck us out on Facebook: https://www.facebook.com/QualityTintingandSignsLicensed & Insured | CA Lic 1011335
...

Try adding the css code below and see if that works for you.

.supernova {

height: 100%;

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

Let us know if you have any questions or if you need further assistance. 

HelloI have added the new code and I still don't see a difference. I have also tried different photos of various orientations. I have included a screen shot of how it appears on my phone. I have also tried it on other phones and ipads and it is loading in the same manner.Please adviseThank youMicaelaMicaela Cook | General Manager805-541-55333583 S. Higuera St., San Luis Obispo, CA 93401www.qualitytintingandsigns.comCheck us out on Facebook: https://www.facebook.com/QualityTintingandSignsLicensed & Insured | CA Lic 1011335
...

Unfortunately, we are not able to view the screenshot you sent. Can you please reattach it by following this guide https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum.

In the meantime, here's how it looks when I tested it.

Looking forward for your response. 

I have included 2 more screen shot examples. When the link loads on my phone it appears like this, if I rotate the phone sideways and then back to portrait the spacing disappears. I cleared the cache on my browser and tried it one different devices and am still seeing the same issue. I am building this form for a client and will be doing many more in the future. I need to fix this for them right away. If there is a certain size I should crop the photo to in order to eliminate the error I can do that just let me know or please go into the form and fix the issue in the coding.

sent the form to a colleague and they are getting the same result

I have updated the CSS in your form. Can you please test it again.

Looking forward for your response.