How can I fix the background image so the picture fills up the width of the page?

  • NAHN
    Asked on February 19, 2018 at 11:36 PM

    I created a form and I want to use a nursing picture for the page background. I'm successful with selecting the picture. However, I want the picture to fill up the entire width of the page, similar to the background pictures you see in the already created themes. The picture is not filling up the entire width of the page. I get several small pictures throughout the page. How can I fix this so the picture fills up the width of the page? Please help.


  • Jan
    Replied on February 20, 2018 at 4:07 AM

    Please inject this custom CSS code to fix the background image:

    .supernova {
    background-size: cover;
    background-attachment: fixed;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    151911720702 20 zk73d Screenshot 10

    Hope that helps. Thank you.

  • NAHN
    Replied on February 20, 2018 at 9:18 AM

    Thank you so much for your help. When I select CSS to enter the code, I get nothing but a blank screen. Is something supposed to populate to the screen? The same thing will occur anything I select Advanced Designer. Any thoughts?

  • TREVON
    Replied on February 20, 2018 at 11:02 AM

    When you select to enter CSS a screen similar to one shown below should appear.

    1519142407Advacned Designer Screenshot 10

    incase you still have issues you can use the Advanced Form Designer as shown below.

    1519142295Advacned Designer Screenshot 21

    Incase you are still experiencing the problem you may need to check you internet connection or clear browser cache.

  • TREVON
    Replied on February 20, 2018 at 11:02 AM

    When you select to enter CSS a screen similar to one shown below should appear.

    1519142407Advacned Designer Screenshot 10

    incase you still have issues you can use the Advanced Form Designer as shown below.

    1519142295Advacned Designer Screenshot 21

    Incase you are still experiencing the problem you may need to check you internet connection or clear browser cache.

  • NAHN
    Replied on February 20, 2018 at 2:43 PM

    Thank you for the information you provided. However, I have tried CSS and Advanced Form Designer but the screen just stalls and the form designer or any CSS options do not appear on the screen. I don't know if it's because I selected an already made theme.

    This is the link to my form:  https://form.jotform.com/NAHN/nursenominationform 

    Is it possible for you to make the change on my form so the picture populates the entire screen?

  • TREVON
    Replied on February 20, 2018 at 3:11 PM

    As per your request I have made the changes to the form background image. Kindly confirm everything is is order.

  • NAHN
    Replied on February 20, 2018 at 3:43 PM

    IT'S PERFECT!!! That's exactly what I wanted.  Thank you so much for your help!!! I greatly appreciate it.

  • NAHN
    Replied on February 20, 2018 at 4:30 PM

    Thank you so much for your help. You were able to produce exactly what I wanted for the image background. Can you please help me again?

    I have two other forms I have created for two other nursing events:

    https://form.jotform.com/NAHN/nomineebioform

    https://form.jotform.com/NAHN/eventregistrationform 

    Both forms have a picture for the background. The form you updated for me is exactly what I wanted. The background picture is stationary and only the form on top moves up or down. I want the same effect with the other two forms. Can you please help me achieve the same effect with my other two forms?

    Please.........


  • Jed_C
    Replied on February 20, 2018 at 5:45 PM

    I've a clone of your 2 other forms. Please see if that's what you are trying to do.

    https://form.jotform.com/80507068401955 

    https://form.jotform.com/80507193301953

    If so, you can clone those forms by following this guide https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Let us know if you have any questions or if you need further assistance. 

  • NAHN
    Replied on February 20, 2018 at 9:09 PM

    The clone of my two other forms is exactly what I want. The background picture is fixed and does not move, only the form elements. That's what I wanted. Thank you so much.

    I followed the instructions provided to clone the two forms but I was not successful. I'm getting the error message: Unauthorized request. You do not have access to this form.

    I provided a screen capture of the error message I'm getting. Any idea how I can overcome the error message so I can clone the two forms?

    Thank you.

  • Elton Support Team Lead
    Replied on February 21, 2018 at 2:34 AM

    You can actually fix the background in your forms by injecting this CSS code to the forms.

    .supernova {background-attachment: fixed !important;}

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Or you can fix it in the Advanced Designer. In the DESIGN tab, click the BACKGROUND IMAGE then check the "Fixed" checkbox. Save the changes afterward. This should make the background image fixed and not scrollable.

    How can I fix the background image so the picture fills up the width of the page? Image 1 Screenshot 20

  • NAHN
    Replied on February 21, 2018 at 9:11 AM

    As I stated before, for whatever reason, when I select CSS or Advanced Designer nothing comes up. The screen just stalls and no options come up. I have no idea if it's because of the plan I have or if it's an internet explorer setting that is preventing CSS or Advanced Designer options from populating on the screen. I understand I can make the changes myself but because CSS and Advanced Designer do not work for, I'm unable to make the change to make the background image fixed on my two forms.

  • NAHN
    Replied on February 21, 2018 at 9:22 AM

    Never mind. I have success! Not sure what changed but all of a sudden this morning I'm able to access CSS and Advanced Designer. I was able to make the necessary changes myself to make the background image fixed. Thank you so much for your help! I'm all set.

  • TREVON
    Replied on February 21, 2018 at 10:36 AM

    You are welcome. In futures incase you are experiencing the same issue kindly try clearing your browser cache, changing your browser or clearing the form cache

    Kindly do let us know if you need further assistance.