- VcomdigitalAsked 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/70996371684168Page URL:
- JotForm SupportJohn_BensonAnswered 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.
- VcomdigitalAnswered on May 15, 2017 at 03:35 PM
Okay, let me change it back then for you to take a look again.
- JotForm SupportJohn_BensonAnswered 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.
- VcomdigitalAnswered on May 15, 2017 at 04:03 PM
I did that and it still does it. I have tried all of them.
- JotForm SupportJohn_BensonAnswered 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:
background-position: inherit !important;
Here's a guide on: How-to-Inject-Custom-CSS-Codes
Hope that helps. If you have questions, please let us know. Thank you.
- VcomdigitalAnswered on May 15, 2017 at 05:35 PM
Thank you! I tried the css injection but still doing the same thing.
- JotForm SupportKevin_GAnswered 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:
This should be the result:
Please, give it a try and let us know how it goes.
- VcomdigitalAnswered on May 17, 2017 at 10:43 AMHi 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.
- JotForm SupportKevin_GAnswered 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:
background-position: inherit !important;
And the background image should fit the form's width and height.
- VcomdigitalAnswered on May 17, 2017 at 03:44 PMDid 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.
- VcomdigitalAnswered on May 17, 2017 at 03:44 PMAlso there is a warning sign when I inject the code
- VcomdigitalAnswered on May 17, 2017 at 04:43 PMI got the pink part scrolling I changed on the code scrolling 'yes'. But
the images still the same...
- JotForm SupportKiranAnswered 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.