The background image is not displaying

  • hanfu
    Asked on December 21, 2015 at 8:24 AM

    The background image is showing when i draft the form, but after i publish the background pic disappear.

    Jotform Thread 729774 Screenshot
  • beril JotForm UI Developer
    Replied on December 21, 2015 at 9:20 AM

    I've checked your form which is http://www.jotform.me/form/53533582420451 I am not able to reproduced same issue that you are having.

    The background image is not displaying Image 1 Screenshot 20

    As far as I understand from your thread, you embedded your form to your website. Could you please indicate the URL of your page? This will help us better analyze the problem.

    In addition to that, can you try to embed the form using the iFrame embed code?

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    I hope it helps.

    If this does not resolve the issue, please let us know. We will try another solution.

  • hanfu
    Replied on December 21, 2015 at 9:09 PM

    hmm... I try it at home, it look fine, should because of my company firewall. 
    Another issue is my custom CSS is not working.

    The background image is not displaying Image 1 Screenshot 20

     

  • Chriistian Jotform Support
    Replied on December 21, 2015 at 11:00 PM

    Hi,

     

    I checked your form and noticed that there were additional css added to the form that is not seen on the screenshot you have provided. I assume you wanted the .form-html img tag to align to the center of the form. You can try removing the text-align:center code and replace it with the following code:

    display: block;
    margin-left: auto;
    margin-right: auto

    This code should be inside the .form-html img tag, and will look like this:

    .form-html img{
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

     

    Do inform us if you need further assistance,
    Regards.

  • hanfu
    Replied on December 22, 2015 at 12:33 AM

    OK, successfully move the border to the middle.

    But background image (the big black chinese word"漢") is not appealing in live form... in the preview, i can see the big black chinese word.

  • Charlie
    Replied on December 22, 2015 at 1:59 AM

    If you are referring to the background image in your "Text" field?

    The background image is not displaying Image 1 Screenshot 80

     

    The reason why it is not showing in live preview is because the image is using HTTP in its link http://gdurl.com/h2Lj. Please note that when you are viewing your form's direct link it is using HTTPS protocol or SSL enabled. 

     

    Your form direct link:

    https://form.jotform.me/53533582420451 - this is using SSL or secure link (HTTPS)

    Your image URL:

    http://gdurl.com/h2Lj - this is using HTTP which is unsecure

     

    The form will not load the image because it is unsecure. To fix this, you'll need to host the image on an HTTPS protocol. Or you can follow the steps below:

    1. Add an "Image" field and select "Upload Image File" in your form.

    The background image is not displaying Image 2 Screenshot 91

    2. Make sure you have downloaded the image logo in your local storage then upload it here.

    The background image is not displaying Image 3 Screenshot 102

    3. Now view the form in a new tab.

    The background image is not displaying Image 4 Screenshot 113

    4. In the live preview, right click on the image and select "Copy image address". We will get the link of it.

    The background image is not displaying Image 5 Screenshot 124

    5. In your CSS code, replace the image link using the one we have copied.

    .form-html {

        background-image : url('paste the copied image address here') !important;

        background-repeat : no-repeat !important;

        background-position : center !important;

    }

    .form-html img {

        display : block !important;

        margin-left : auto !important;

        margin-right : auto !important;

    }

     

    The background image is not displaying Image 6 Screenshot 135

     

    6. You can now then remove the image file in your form by clicking the delete button or the "x" icon.

    The background image is not displaying Image 7 Screenshot 146

     

     

    You can see how cloned form looks like after that change: https://form.jotform.com/53550776408966. The image is uploaded in our servers that uses HTTPS so it matches the form's HTTPS protocol. For other images, you can repeat the process.

    Let us know if that works.