How can we add a background image to our form?

  • Profile Image
    CODE
    Asked on March 30, 2012 at 10:03 AM
  • Profile Image
    moonzkie
    Answered on March 30, 2012 at 10:06 AM

    Sure adding background image is easy with the use of  Injecting Custom CSS to do this:

    1. While  on  your form (Edit Mode), click Setup & Embed then  Preferences

    2. On the Preferences window, goto Form Styles tab and then insert the following CSS Code under Inject Custom CSS Box. Make sure that the url for the image is correct and working.

    .form-all
    {  backgound-image:url('http://www.site.com/image.jpg'); }

    You might need to add this just in case:

    .form-line { background: none; }

    You can also visit the following thread for some tips:
    https://www.jotform.com/answers/16435-How-can-I-add-a-background-image-to-my-form

    If you need further assistance let us know.

  • Profile Image
    gori-mathew
    Answered on March 30, 2012 at 10:10 AM

    Hello;

    In addition to guide from my colleague above, you can add a background image in your form by adding Custom CSS unto it. Just click the "Preferences" under "Setup & Embed" tab, and click the "Inject Custom CSS" from "Form Styles" tab. Add the following code snippet:

    .form-all {
    background: url(enter the url of the image you want) no-repeat top left;
    }

    Or you can just add url(image source) on the same tab for "Background"

    We have more guides from previously answered same questions on the forum; check this link,

    http://www.jotform.com/answers/36884-how-can-I-set-my-own-image-as-the-form-background

    Hope this helps, please feel free to contact us for any assistance.

  • Profile Image
    CODE
    Answered on March 30, 2012 at 10:11 AM

    OK, Thanks :)

  • Profile Image
    gori-mathew
    Answered on March 30, 2012 at 10:19 AM

    Welcome all the time!

  • Profile Image
    ikonos_jotform
    Answered on November 20, 2012 at 03:41 PM

    Hi there!

    I have tried all the possibilities above and none seems to work. Can you help me?

    http://form.jotformeu.com/form/23245601195348

    Thanks

  • Profile Image
    EduardoMendez
    Answered on November 20, 2012 at 03:45 PM

    Hi there, 

    Can you please share the URL of the image that you would like as a background?

    We'll be glad to assist you!

  • Profile Image
    ikonos_jotform
    Answered on November 20, 2012 at 04:36 PM

    Had to upload it to another source. Now its working. Thanks.

  • Profile Image
    djouonanglandry
    Answered on May 01, 2013 at 06:40 AM
    Hello am Landry, am having a similar problem trying to add an image background to my form i have tried this :.form-all { background-image: url("http://prointernetpub.com/images/stories/enqfbg.jpg")no-repeat top left; }on my website but nothing happens.But when i use the backgroung color box it works but the results is not what am looking for i just bone the image to appear on the bottom right.Thanks
  • Profile Image
    abajan
    Answered on May 01, 2013 at 09:07 AM

    @djouonanglandry

    The declaration is incorrect. The property shoud simply be background, not background-image. Please try

    .form-all {
    background: url(http://prointernetpub.com/images/stories/enqfbg.jpg)
    no-repeat top left;
    }

    and let us know if it helps.

    Thanks

  • Profile Image
    abajan
    Answered on May 01, 2013 at 09:13 AM

    @djouonanglandry

    Additionally, please note where the spaces in my code occur. It will not work without the space after the closing parenthesis.