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

    Why is the page background image to displaying as like on the preview?

    Asked by Vcomdigital on May 15, 2017 at 02:27 PM

    I am using squarespace and I have tried all the codes and still the image looks all zoomed in. Not like on preview.

    My form as viewed on preview in jotform: https://form.jotform.us/70996371684168

     

     

    Page URL:
    http://vcom.digital/test-us-jotform/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by John_Benson on May 15, 2017 at 03:32 PM

    I was not able to check it further because I notice that the website URL you provided and form direct link is not the same background on the image you provided. 

    I cloned your form and changed the background, I was not able to replicate the issue regarding on background image zooming in. See screen animation below:

    Also, please try embedding the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    If you have questions, please contact us again. Thank you.

  • Profile Image

    Answered by Vcomdigital on May 15, 2017 at 03:35 PM

    Okay, let me change it back then for you to take a look again.

    Thanks

  • Profile Image
    JotForm Support

    Answered by John_Benson on May 15, 2017 at 03:46 PM

    Thank you for your cooperation. Also, try embedding the form using the iFrame method that I mention on my last reply.

    We'll wait for your response. 

  • Profile Image

    Answered by Vcomdigital on May 15, 2017 at 04:03 PM

    I did that and it still does it. I have tried all of them.

     

  • Profile Image
    JotForm Support

    Answered by John_Benson on May 15, 2017 at 04:58 PM

    The form direct link is showing the background image properly. When I checked your website, I was able to see that the background image is zoom in. I can see now the problem.

     

    Please add this custom CSS code to your form:

    .supernova {

    background-position: inherit !important;

    }

    Here's a guide on: How-to-Inject-Custom-CSS-Codes

    Result:

    Hope that helps. If you have questions, please let us know. Thank you.

  • Profile Image

    Answered by Vcomdigital on May 15, 2017 at 05:35 PM

    Thank you! I tried the css injection but still doing the same thing.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 15, 2017 at 08:11 PM

    I have checked your form and noticed it displays like this: 

    Do note that it's not possible to set the background image to fixed and display the entire image over the form, this due to the image size compared to the form's size.

    If you would like to display the entire image on your form then you would need to repeat the background, please try injecting the following code: 

    .supernova {

        background-size: 100%;

    }

    This should be the result: 

    Please, give it a try and let us know how it goes. 

  • Profile Image

    Answered by Vcomdigital on May 17, 2017 at 10:43 AM
    Hi Thank you for this. I will try it.
    However how comes it works well on jot form and we I embed the code on the
    website it doesn't looks the same?
    I really don't want to repeat the image.
    Thanks again.
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 17, 2017 at 12:11 PM

    I was checking your form and I can see it displays like this: 

    As you can see, on the direct link the background is repeating and the background image width is 100%, now, the reason why the image cannot be displayed in all the form is due to its size, if you display the image to display with "100%" width and set it to "no-repeat" you will get this:

    You would need to have an image with enough height, this way it can be fully displayed in the entire form. 

    You could just leave the code my colleague provided above: 

    .supernova {

    background-position: inherit !important;

    }

    And the background image should fit the form's width and height. 

     

  • Profile Image

    Answered by Vcomdigital on May 17, 2017 at 03:44 PM
    Did you see the form on jotform?
    The image displays well... and the pink part just moves. Looks Great!
    There is obviously something up with the code given for squarespace, it
    doesn't display correctly on squarespace. Does this make sense?
    Right now the whole image fills the space that it's too zoomed in and the
    pink part does't even scrolls... like on jotform.
    ...
  • Profile Image

    Answered by Vcomdigital on May 17, 2017 at 03:44 PM
    Also there is a warning sign when I inject the code
    ...
  • Profile Image

    Answered by Vcomdigital on May 17, 2017 at 04:43 PM
    I got the pink part scrolling I changed on the code scrolling 'yes'. But
    the images still the same...
    ...
  • Profile Image
    JotForm Support

    Answered by Kiran on May 17, 2017 at 04:47 PM

    The image is zoomed in because of the height of the form on the Squarespace website. As we see the form using the direct link, the background is fixed to the form height and it is appearing correctly. However, when we form in the web page, the height of the height is 2075px whereas the image height is 810px. So, the image is adjusting itself to zoom to match the height of the form. 

    Please try changing the height of the frame where the form is embedded or in the iframe embed code of the form to 700px so that the image should be displaying correctly.

    Please get back to us if you need any further assistance. We will be happy to help.