Form is longer than background image

  • Profile Image
    dbizzle
    Asked 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?

  • Profile Image
    John_Benson
    Answered 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.