Form background doesn't appear and behave the same in the webpage as it does in the preview

  • Profile Image
    JeffreyGrounds
    Asked on April 05, 2019 at 01:08 PM

    Why is it that when I preview my changes here on JotForm my page looks great, but when I put it on my website and view it there it's not the same?

  • Profile Image
    Kiran
    Answered on April 05, 2019 at 02:24 PM

    I have checked the form and the web page where the form is embedded. The form on the web page seems to be displayed normally as displayed using the direct URL. Were you able to fix the issue? If you still notice any issue, please provide us with more information. Also, I notice that the form is embedded using Javascript embed method. You may try embedding the form using iframe embed method and see if that makes any difference. 

    You may get the iframe embed code for your JotForm by following the steps in the guide below:

    https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    JeffreyGrounds
    Answered on April 05, 2019 at 04:43 PM
    The iFrame didn't help. The problem is that I want the background image to
    take up the whole screen without moving while people can scroll up and down
    ...
  • Profile Image
    BDAVID
    Answered on April 05, 2019 at 06:34 PM

    The background moves because it is not the background of the webpage.

    I assume that you want to accomplish something like this:

    1554503337background.gif

    If this is correct, please do the following:

    1) Set the background image in the body of your webpage. You may try to do it through CSS code:

    <style="text/css">

    body.body-layout-custompage{

        background-image: url(https://www.jotform.com/uploads/JeffreyGrounds/form_files/_MG_0598.jpg);

        background-repeat: no-repeat !important;

        background-attachment: fixed !important;

        background-size: cover;

    }

    </style>

    2) Remove the background from your form, and make it transparent. You can try to do it by injecting this CSS code in your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .supernova{

        background-image: none !Important;

        background: transparent  !Important;

    }

    Let us know if you need more help.