What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I add a background image to my form?

    Asked by quarryninja on March 07, 2011 at 11:48 AM

    I cant find any option to add a background image to the form... Great site BTW! I love it 8)

    background image
  • Profile Image

    Answered by kimmiandmikki on March 07, 2011 at 12:16 PM

    Hello,


    I would suggest using CSS for this one.

    First go to Setup & Share -> Preferences -> Form Styles -> And then click on the "Inject Custom CSS" area.


    You'll be able to enter your CSS codes in there.

     

    If you want the background image on form itself, copy-paste this code:

     

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

     

    *Note: You may change the position of the image. For example if you want it on the center of the page just change "top left" to "center", or "bottom right" etc. Also if you want to repeat just remove "no repeat" because as far as I know the default is the repeat property.

     

    If you want the background image on the background of the form, enter this code:

     

    body, html {
    background: url(enter the url of the image) no-repeat top left fixed #f0e9d6;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    }

     

    *Note: "fixed" means you want the background to stay in place even when you scroll down the form. You can remove this if you want it to scroll along with the form. If you want to change the background colour, just change "#FFFFFF" (white) to any color you want. Here is a website where you can find CSS colors:

    http://www.w3schools.com/css/css_colors.asp

     

     

    Hope this helps!

  • Profile Image

    Answered by YummyGarden on September 09, 2012 at 04:01 PM

    When I try to do this, my image is not creating a tile and instead it's a small picture in the top left corner.

  • Profile Image

    Answered by AtacanC on September 09, 2012 at 05:01 PM

    @YummyGarden

    Can you please open a new thread and provide us the form ID / URL? You can also share the image URL with us. So we can try to add the background image to your form.

    Thanks for your cooperation.