Background image zooms in on mobile

  • Raineydaysbranding
    Asked on September 6, 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.

  • Elton Support Team Lead
    Replied on September 7, 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;}

    }

    Background image zooms in on mobile Image 1 Screenshot 30

    ----

    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%;}

    }

    Background image zooms in on mobile Image 2 Screenshot 41

    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!

  • Raineydaysbranding
    Replied on September 7, 2016 at 11:45 AM

     

    Background image zooms in on mobile Image 1 Screenshot 20

    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.

  • David JotForm Support Manager
    Replied on September 7, 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;

    }

    }

    Background image zooms in on mobile Image 1 Screenshot 20

    Let us know if you need more help.