How to fix background image blurred on iPhone device?

  • chiarelliangelo82
    Domanda del 3 aprile 2024 alle ore 08:49

    Buongiorno, ho creato dei moduli con android, impostando un immagine di sfondo. Ora sui dispositivi android la visualizzano correttamente così come l'ho impostata io, mentre su iPhone la visualizzano molto alterata, ingrandita e distorta. Come mai? Grazie per l'aiuto.

  • Afzal Jotform Support
    Risposta del 3 aprile 2024 alle ore 09:03

    Hi Angelo,

    Thanks for reaching out to Jotform Support. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same problem:

    How to fix background image blurred on iPhone device? Image 1 Screenshot 30

    This can be fixed by adding custom CSS to your form. Check out the steps below to see how it's done:

    • Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
    • Under the Styles tab, paste the code below into the Inject Custom CSS area.
    /*To fix the background image on iPhone 13526821*/
    @media only screen and (max-width: 480px){
    .supernova {
        background-size: contain !important;
    }
    }

    Here's what the result will look like:

    How to fix background image blurred on iPhone device? Image 2 Screenshot 41

    Here's the cloned version of the form that you can test.

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

  • chiarelliangelo82
    Risposta del 3 aprile 2024 alle ore 13:15

    Thank you so much for your help and quick response.


    I managed to solve for two modules, like the one in the example he sent me, thanks to his help.


    Only for the other two, inserting the same code does not solve the problem.


    The link to the module where I was unable to resolve is this:


    https://form.jotform.com/240416508437354


    In any case, thank you very much for the excellent assistance. Sincere congratulations.


    I hope there is a way to fix this module too.


    Thanks again.

  • Vincenzo Jotform Support
    Risposta del 3 aprile 2024 alle ore 14:01

    Buonasera Angelo, 

    Grazie per averci contattato nuovamente. Poiché il problema che sta avendo è relativo a un altro modulo, per evitare possibili confusioni, ho spostato la sua domanda su una nuova discussione. Può vedere la mia risposta facendo clic qui.

    Restiamo a sua disposizione per ulteriori chiarimenti.