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

    Background Problems

    Asked by bdewitt on December 19, 2012 at 12:28 AM

    I would like the background image I have loaded to cover the entire background of the form and if the form had the ability to scroll would like to let the image scroll with the form. I have been playing with this for about an hour and can't seem to figure it out. Please help.

    Page URL:
    http://form.jotformpro.com/form/23168419680964

  • Profile Image

    Answered by fxr on December 19, 2012 at 02:21 AM

    You can try injecting this CSS:

     

    {
    background-image:url('http://myimage.com/img.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

    Just edit the url to the location of your background image file.

  • Profile Image
    JotForm Support

    Answered by abajan on December 19, 2012 at 03:20 AM

    @bdewitt

    Having cloned your form and examined its injected CSS, I discovered that you just need to add fixed to the background declaration, as highlighted below:

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    color: #FFF;
    margin: 0;
    padding: 0;
    }

    When done, the form should work like this one.

  • Profile Image
    JotForm Support

    Answered by abajan on December 19, 2012 at 04:02 AM

    Incidentally, if you want the labels and sub-labels to be white, remove the color: #FFF declaration from the body, html rule and place it in a new rule whose selector is label, .form-sub-label:

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    margin: 0;
    padding: 0;
    }

    label, .form-sub-label {
    color: #FFF;
    }

    This has the added benefit of not making the form builder's text white!

    If you want to style the sub-labels separately:

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    margin: 0;
    padding: 0;
    }

    label {
    color: #FFF;
    }

    .form-sub-label {
    color: #000;
    }

    Ideally, both the labels and sub-labels should be white with black drop shadows, as in this form but text-shadow is a CSS3 property and as such, would have no effect in many older browsers. More importantly, it's not supported in any version of Internet Explorer, according to these tables. So, even though it looks cool, I would advise against using it for the forseeable future.

  • Profile Image

    Answered by bdewitt on December 19, 2012 at 10:16 PM

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    color: #FFF;
    margin: 0;
    padding: 0;
    }

     

    I used this CSS you suggeested but the page still doesn't look right. There is a large area on the right side of the screen that is just white..Thank you for all your suggestions though

  • Profile Image
    JotForm Support

    Answered by idarktech on December 19, 2012 at 11:43 PM

    @bdewitt

    It is because your image dimension isn't enough to cover the whole page. You can however stretch your background image to cover the white area. Use this:

    body, html {

    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) repeat fixed;

    color: #FFF;

    margin: 0;

    padding: 0;

    -webkit-background-size: cover; /*for webKit*/

    -moz-background-size: cover; /*Mozilla*/

    -o-background-size: cover; /*opera*/

    background-size: cover; /*generic*/

    }

    Thanks!

  • Profile Image
    JotForm Support

    Answered by abajan on December 20, 2012 at 04:40 AM

    @bdewitt

    I should have realized you meant for the image to cover the entire background of the page. Anyway, idarktech's solution works great. Here's some additional information on the background-size property.

    Have fun!

  • Profile Image
    JotForm Support

    Answered by abajan on December 20, 2012 at 04:42 AM

    Arghh! Wrong link. Here's the right one.

  • Profile Image
    JotForm Support

    Answered by abajan on December 20, 2012 at 04:45 AM

    LOL

    Okay, let me try this again.

    Success!