The background image is not displaying

  • Profile Image
    Asked on December 21, 2015 at 08:24 AM

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

  • Profile Image
    Answered on December 21, 2015 at 09:20 AM

    I've checked your form which is I am not able to reproduced same issue that you are having.

    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?

    I hope it helps.

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

  • Profile Image
    Answered on December 21, 2015 at 09: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.


  • Profile Image
    Answered on December 21, 2015 at 11:00 PM



    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,

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

  • Profile Image
    Answered on December 22, 2015 at 01:59 AM

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


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


    Your form direct link: - this is using SSL or secure link (HTTPS)

    Your image URL: - 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.

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

    3. Now view the form in a new tab.

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

    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;




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



    You can see how cloned form looks like after that change: 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.