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

    Custom CSS: How to setup a background image around a form

    Asked by andynowlen on January 22, 2013 at 05:36 PM

    Hi, I want to put an image on the page behind my form in a way that lets the form move up and down in front of that image.  I have learned how to change the background of the form itself, but can't figure how to put an image on the page behind it.  Thanks for your help, Andy.

  • Profile Image
    JotForm Support

    Answered by Deygus on January 22, 2013 at 06:18 PM

    Could you please share with us the link to your website where you are trying to add your form and we will try to assist you with this.

  • Profile Image

    Answered by andynowlen on January 22, 2013 at 06:33 PM

    I am planning to only link to the Jotform url.  I don't plan to embed the form on my website, but only link to it. Thanks.

  • Profile Image
    JotForm Support

    Answered by Deygus on January 22, 2013 at 07:23 PM

    If you are only planning on linking it I don't quite think this would work to meet your needs of doing so without at least using one of our embedding methods to then be modified to create this effect.

    To my understanding and based on the information you provided, it seems like you basically want your form to show on your page and be transparent where you can see the website's background image through the form but then if the user scrolls on your website the form would then scroll with it during this? Could you please correct me if I am misunderstanding you on this?

  • Profile Image

    Answered by andynowlen on January 23, 2013 at 12:14 PM

    Thanks for helping as I figure this out.  We like the present color of the form background.  It is like 682 pixels wide.  The portion I want to change, if possible, is what shows on the rest of the page behind the (presently) light green form itself.  I guess if that is not possible so be it.  The Jotform home page is a perfect demonstration of what I want to do.  The central portion is forms, links etc.  The outer portion is the nice blurred bokeh lights.  I just want to something like that with my own image.  Based on your reply I may have to change my plan.  Thanks again.

  • Profile Image

    Answered by jeanettebmz on January 23, 2013 at 12:45 PM

    You can put an image behind the background of a form using custom CSS

    .form-all{
           background-image:url('http://www.yourimageURL.com/yourimage.jpg');
    }

    You might need to add this just in case:

    .form-line { background: none; }


    Check on this example  Here
  • Profile Image

    Answered by jeanettebmz on January 23, 2013 at 12:46 PM

    Please check this guide about How to Inject Custom CSS


  • Profile Image

    Answered by andynowlen on January 23, 2013 at 01:17 PM

    I understand how to put an image/color behind the wording and blanks of my actual form.  That is not what my inquiry is about.  I want to change what is on the entire page 'behind' the form.  I want the form background itself to the green color it is, and I want the page behind the form to be a different color and/or image.  Judging by the flow of the answers to my initial inquiry it seems I should conclude that I cannot do this using Jotform only.  For now, please just let me know if my conclusion is correct.  Thanks.

  • Profile Image

    Answered by jeanettebmz on January 23, 2013 at 01:37 PM

    mmm, is this maybe what you want to accomplish to ?

  • Profile Image

    Answered by andynowlen on January 23, 2013 at 01:41 PM

    Yes that is.  I want to control the page to different from the form like your sample demonstrates.  What is the right way to ask a question to more easily describe what I am trying to accomplish and get to this point?  What code or steps do I take to do what you demonstrated?  Thanks again.

  • Profile Image

    Answered by jeanettebmz on January 23, 2013 at 01:58 PM

    /*this is the css for the form itself

    .form-all{
    background-image:url('http://www.thinkgraymatter.com/Footer/Footer-RGB81-Pattern.png');
    }.form-line {
    background:transparent; }.form-line {
    padding-left: 0px !important;
    padding-right: 0px !important;
    }

    #input_1.form-textbox{
    background:#CCCCCC !important;
    }#input_8.form-textbox{
    background:#CCCCCC !important;
    }textarea#input_9.form-textarea{
    background:#CCCCCC !important;
    }


    /*this is the  CSS code for the background around the form


    body, html{
    background-image:url('http://www.jotform.com/images/themes/v-day2-thumb.jpg')!important;
    }

  • Profile Image

    Answered by jeanettebmz on January 23, 2013 at 01:59 PM

    I updated the form to show you how the contrast  look like

  • Profile Image

    Answered by andynowlen on January 23, 2013 at 02:19 PM

    Very good.  Thanks again for your help.  I got it to work using your sample code.  Now I will get the image i want to use.  Thanks again.

  • Profile Image

    Answered by jeanettebmz on January 23, 2013 at 02:20 PM

    You are very welcome!