Form is longer than background 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?

  • John_Benson
    Replied on August 14, 2016 at 8: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.

    Form is longer than background image Image 1 Screenshot 40

    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.

    Form is longer than background image Image 2 Screenshot 51

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

    Form is longer than background image Image 3 Screenshot 62

    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.