Background image not updating on a clone version of a form in mobile device

  • Profile Image
    lharriman
    Asked on July 01, 2017 at 03:09 PM

    I cloned an old form and changed the background image. But the old image is still stuck to the mobile version of the form. How can I change this?

  • Profile Image
    Michael
    Answered on July 01, 2017 at 08:04 PM

    The issue is happening because there is a CSS code in your form that changes the background image of the form page when in mobile device and the link in that code still has the old link from the original (2016) version.

    You can locate that code from the Form Designer under CSS tab.

    I suggest you update that code (in the red box) to this:

    .supernova {

            background-image : url("https://www.jotform.com/uploads/lharriman/form_files/back.300.jpg");

            background-size : cover;

            height : 100%;

            overflow : hidden;

    }

    I hope this helps. If you have other questions regarding this, please feel free to contact us again anytime.

  • Profile Image
    lharriman
    Answered on June 22, 2019 at 05:35 PM

    Hello. This trick worked last year, but now when I try to do it again, it isn't working. The mobile version still has the wrong background image. Here is the link to my current form:


    https://form.jotform.com/91726932769169https://form.jotform.com/91726932769169https://form.jotform.com/91726932769169

  • Profile Image
    Michael
    Answered on June 22, 2019 at 08:24 PM

    It appears that you have updated the page background here (please see image below).

    1561249207zt20_19_17.png

    However, the link to the background image in the custom CSS codes injected in your form has still the link to the old image.

    1561249321zt20_21_26.png

    Please try updating the codes to this:

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

      .supernova {

            background-image: url("https://www.jotform.com/uploads/lharriman/form_files/website-background.657.jpg");

            background-size: cover;

            height: 100%;

            overflow: hidden;

    }

    Feel free to contact us again anytime should you have other questions or concerns.