Why the background image is not being applied to text boxes fields in embedded form?

Hello,

So I have cloned one of my forms and added 1 or more fields to it.  The color seems to go to white in those fields where it should be blue with clouds like the rest of the form.

Thank you

I have checked your form and I can see you're using an image as background, when the form is embedded it does not seem to work and I think this is because it is not over a secure link. 

I have re-uploaded the image over a secure link and it works on my end, you can take a  look on my cloned form of yours here: https://form.jotform.com/62557258590970 

What I would suggest you is to re-upload your image and make sure you have a secure link (HTTPS) this way you will avoid content not loading because being over non-secure links. 

Regarding to your second question, it has been moved to another thread, it can be found here: https://www.jotform.com/answers/930475 

We will assist you with that as soon as possible. 

Hi Kevin

When I click on the clone link you shares above.  It seems to show the same missing cloud background on mobile device.  The image was one of the templates that was within jotform.  I might be able to find a similar image.

Though, I noticed that one of the default forms that I cloned from doesn't seem to have the same issues.  Seems like it only happens when I add radio buttons or a drop down.  If I don't add those...the form seems to maintain the background.

Thanks again

Yes, the image seems uploaded to our servers, but it loads over a non-secure link and when I tried to open the secure link (HTTPS) it did not work. 

I have also checked my cloned form on an iPhone 6S and this is what I can see: 

I'm not sure if you're referring to the blank space that displays at the bottom of the form: 

I would suggest you to inject this code to your form: 

.form-all {

    background: url(https://www.jotform.com/uploads/realestatecoach/form_files/6461_clouds.jpg);

    font-family: verdana !important;

    background-size: 100% 100%;

    background-color: #82CEF0 !important;

}

That way you display the background color for all the form and there are not blank spaces, expected result: 

Guide to inject the CSS code: How-to-Inject-Custom-CSS-Codes

Hope this helps. 

That solution was the ticket!!! 

upon going to the inject Custom Css, I removed the default coding for background and replaced with the code you suggested and bam!  Working perfectly again.

Thank you Kevin!

You're most welcome.

I'm glad to know the given code worked for you. 

Please if you have any question or need more help, do not hesitate to contact us, we will be glad to assist you. 

Cheers!