How to limit form height to scroll with background image

  • Profile Image
    THFF
    Asked on November 16, 2017 at 11:13 AM

    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?

  • Profile Image
    lumiardian
    Answered on November 16, 2017 at 12:37 PM

    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. 

     
  • Profile Image
    aubreybourke
    Answered on November 16, 2017 at 12:40 PM

    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:

    1510853995Microsoft Edge 16_11_2017 17_3

  • Profile Image
    THFF
    Answered on November 16, 2017 at 12:47 PM

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

    @lumiardian: that didn't fix the issue

  • Profile Image
    lumiardian
    Answered on November 16, 2017 at 01:19 PM

    Can you try this one instead?

    .supernova {

        background-size: cover !important;

    }

    It should look like in the image below: 1510856327jotttt.png

  • Profile Image
    THFF
    Answered on November 16, 2017 at 01:59 PM

    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?

  • Profile Image
    aubreybourke
    Answered on November 16, 2017 at 02:44 PM

    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.

  • Profile Image
    THFF
    Answered on November 21, 2017 at 09:51 AM

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

  • Profile Image
    aubreybourke
    Answered on November 21, 2017 at 11:16 AM

    I found a solution for you. 

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

    1511280666Microsoft Edge 21_11_2017 16_0

    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"
          onload="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:

    1511281001orlando.gif

  • Profile Image
    THFF
    Answered on December 01, 2017 at 12:01 AM

    That was the solution!!! Thanks!

  • Profile Image
    Chriistian
    Answered on December 01, 2017 at 03:41 AM

    On behalf of my colleague, you're welcome.

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