How to limit form height to scroll with background image

Hello, 

Currently I have 2 forms published:

https://form.jotform.com/THFF/transforma2

https://form.jotform.com/THFF/lpacap2018

I have embeded both on my website rotator (happy4ever.org)..forms are visible when you click the respective banner in the rotator.

I see an issue on the "lpacap2018" form... For some reason, when scrolling down the form, the background image is not visible all the way.

How can I fix this?

Please put this CSS Code in Custom CSS area:

.supernova {

    background-size: contain !important;

}

On this link you will find on how to inject Custom CSS Code. 

Yes you can try that. Or if you prefer to use the GUI, open the advanced designer and on the "Background Image" tab check the "cover" option for the page background.

For example:

@aubreybourke: doing what you said in the GUI causes other issues...

@lumiardian: that didn't fix the issue

Can you try this one instead?

.supernova {

    background-size: cover !important;

}

It should look like in the image below: 

thank you @lumiardian... however, it doesn't fix the scrolling problem, and it makes it blurry by blowing up the image so much.

Have you guys clicked on the link to see how the forms look?

May I suggest you try the other options on the Background Image tab. Note that you will need to save the form after each change ( disk icon ).

You can repeat the image, you can fix the image, you can cover the whole page, or you can combine the options.

Sorry guys, nothing worked....but thanks anyway!

I found a solution for you. 

1. First make sure your background image is set to "fixed" only.

2. Then embed your form using the iFrame method.

Getting the Form iFrame Code

3. Edit the iframe embed code. You need to add a max-height property. And enable scrolling. So it will look like this:

     <iframe
      id="JotFormIFrame-73244714128959"
      onDISABLEDload="window.parent.scrollTo(0,0)"
      allowtransparency="true"
      src="https://form.jotform.com/73244714128959"
      frameborder="0"
      style="width: 1px;
      min-width: 100%;
      height:100px;
      max-height: 700px;
      border:none;"
      scrolling="yes">
   

It will add a vertical scrollbar.

For example:

That was the solution!!! Thanks!

On behalf of my colleague, you're welcome.

If you have other concern or need further assistance, please let us know.