Background image zooms in on mobile

  • Profile Image
    dewittmb
    Asked 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.

  • Profile Image
    EltonCris
    Answered 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
    dewittmb
    Answered 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
    BDAVID
    Answered 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.