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

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?

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. 

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
...

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

I assume that you want to accomplish something like this:

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.