How to set background of my form to be fixed?

  • cadet_lawman
    Asked on March 3, 2017 at 4:09 AM

    - Designer screen - Removed my background image and only would give me a gray scale colored form/text when I tried to change background images to get a different one to remain stationary.

  • Nik_C
    Replied on March 3, 2017 at 4:20 AM

    I didn't understand this completely. Is it related to the background that you want to be stationary like in this thread: https://www.jotform.com/answers/1081005 or you want to do something differently?

    Please give us more information.

    Thank you!

  • cadet_lawman
    Replied on March 9, 2017 at 10:13 AM
    It is somewhat related. In Form Designer I go to "Advanced" and on Form
    Background I check-mark Fixed and Cover. Then saved the form by clicking
    ...
  • Nik_C
    Replied on March 9, 2017 at 11:57 AM

    I'm sorry, but apparently we didn't receive your message fully. 

    Could you please re-post the last reply.

    Thank you!

  • cadet_lawman
    Replied on March 11, 2017 at 10:56 AM
    I replied to your email and posted here.  This was the full messase.
     
    It is somewhat related.  In Form Designer I go to "Advanced" and on Form Background I check-mark Fixed and Cover.  Then saved the form by clicking on the disk image on the left side. The background image was gone and when I tried to revert it back to a previous version before that edit, that did not work.  
     
    Basically I want a fixed image and the text to scroll over the top.  Here is an example. 
     
    This link is to a form that was done in version 3 and and I putting off any edits until this is fully corrected.  https://form.jotform.com/60229000623138 
     
     
    Both of these pages are supposed to have a fixed image and used to until I used the version 4 and Form Designer advanced. 
     
     
    How to set background of my form to be fixed? Image 1 Screenshot 20
  • cadet_lawman
    Replied on March 11, 2017 at 11:46 AM
    It is somewhat related. In Form Designer I go to "Advanced" and on Form
    Background I check-mark Fixed and Cover. Then saved the form by clicking
    ...
  • Nik_C
    Replied on March 11, 2017 at 1:08 PM

    Thank you for additional information provided.

    Please follow these steps to make your background fixed and no repeated.

    1) Remove the existing background image:

    How to set background of my form to be fixed? Image 1 Screenshot 20

    2) Copy and paste the below CSS code in your Custom CSS Field:

    .supernova {

    background: url("https://www.jotform.com/uploads/cadet_lawman/form_files/Bldg%20120.jpg") no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    } 

    And you can do this in both of your forms. Also, I adjusted the URL in the above code so it holds the image you used before.

    Let us know how it worked for you.

    Thank you!

     

  • cadet_lawman
    Replied on March 12, 2017 at 1:46 AM
    Thank you very much, that worked. Is this a work around for the time being
    or is this the only way to get this accomplished?
    ...
  • Support_Management Jotform Support
    Replied on March 12, 2017 at 7:46 AM

    Setting up a fixed cover image as your form's background should work even without injecting CSS.

    Here's a short demo on how to achieve it, using the image below as the background

    https://www.jotform.com/uploads/cadet_lawman/form_files/Bldg%20120.jpg

    1. Remove the CSS and image (if any)

    2. Go to the Advanced Designer

    3. Paste the link/URL to the image as the PAGE BACKGROUND (not FORM BACKGROUND)

    4. Tick COVER and FIXED

    How to set background of my form to be fixed? Image 1 Screenshot 20

    To wrap it up, you have 2 options:

    1. EITHER use CSS completely

    2. OR use the Form Builder