What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form is longer than background image

    Asked by dbizzle on August 14, 2016 at 12:16 AM

    My form has many fields, so a scroll bar is available in the browser window.  Issue I have is that the high-res background picture does not cover all the way to the bottom of the form.  I tried using a "Portrait" shot photo, but it still does not cover the bottom of the form.

    Is there a way to have the background image static and just the form scroll?

    Page URL:
    https://form.jotformeu.com/62236989086369

    background image picture is too big how to resize image background fixed cover
  • Profile Image
    JotForm Support

    Answered by John_Benson on August 14, 2016 at 08:20 AM

    The problem here is the scale of the image. It is designed vertically which is good in vertical screens (portrait/mobile) and not on horizontal screens (landscape/desktop).

    In the Form Designer, please enable the "Fixed" and "Cover" option for the page background.

    The "Fixed" value of background-attachment property will make the background image static in one position while the page is being scrolled.

     

    The "Cover" value of background-size property will scale the background image as large as possible to cover up the entire screen. However, some parts of the background image may not show.

    You also need to add the "Mobile Responsive" widget in your form.

    If you do this, the form will show properly in mobile devices.

    However, on portrait or desktop screens, the background image will only show the brick wall. Your background image has a car at the bottom part of it. If you used the "Fixed" method, it will only show the upper part since the "Cover" function is also being used. You need to change the size of your background image so that the important part  of the image will show up. You need to create an image with a resolution of 1920x1080 or 1366x768. 

    Hope that helps. Let us know if you need further assistance. Thank you.