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

    Background image zooms in on mobile

    Asked by dewittmb on September 06, 2016 at 10:00 PM

    I have loaded a custom background image to my form. When looking on a mobile iOS phone or tablet the image is blown up really large and blurry behind the form. Is there any way to fix this issue? Seems to look ok on desktop. The form isn't centered over the image but it looks well enough.

    Page URL:
    https://form.jotform.com/62493918854975

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 07, 2016 at 12:53 AM

    Your image is a bit small to be used as a full-width background image for the form but that's fine, there's no problem with it unless you want a high-quality image background on desktop.

    Anyway, the following are my recommendations for mobile. This is done through CSS Injection.

    If you want the background image to retain its dimensions on mobile like in the following image. Inject this CSS codes to your form.

    @media screen and (max-width:768px){

    .supernova {background-size: contain;}

    }

    ----

    If you want the background image to fit on both sides, use this CSS codes.

    @media screen and (max-width:768px){

    .supernova {background-size: 900px 100%;}

    }

    Guide on how to inject custom CSS codes to your form https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Note that your background image dimension isn't really best for mobile display so if you come up a better one for portrait and landscape mode, that would be much better.

    Hope this helps!

  • Profile Image

    Answered by dewittmb on September 07, 2016 at 11:45 AM

     

    I like the smaller version of the image but would like it to repeat one after another throughout the form. Is there a way to stack the images on top of one another to fill the form up? The above it really how I want it to look. It looks right in the preview in the builder but it blows up the image when viewing on my actual iPhone. I would like one clean stationary image small enough to see but large enough to cover the entire background of the form and then let the form scroll over the top of it. If this cannot be done then a repeating smaller image would be acceptable.

  • Profile Image
    JotForm Support

    Answered by BDAVID on September 07, 2016 at 12:52 PM

    I think the best option would be to repeat the background, please try injecting the following code:

    @media screen and (max-width:768px){

    .supernova {

        background-repeat: repeat-y !important;

        background-size: contain;

    }

    }

    Let us know if you need more help.