How to set background image as fixed cover

  • SunbridgeInstitute
    Asked on September 15, 2017 at 12:56 PM

    I had asked this question once before, and I was given instructions how to correct it, but even though I keep correcting it on all our forms, they keep reverting so that the image is either tiled, or else fixed only to the top of the form.

    Now this particular form, no matter how many time I uncheck the cover and fixed check-boxes, and then recheck them and save in the advanced editor, I cannot get the image to come up as a fixed cover no matter what.

    Can you help me to resolve this recurring problem?

    Thank you!

  • aubreybourke
    Replied on September 15, 2017 at 2:25 PM

    First please remove the image from your form.

    And you can use this CSS instead of using the advanced editor:

    .supernova {
    background-image:url('https://aubreyimages.000webhostapp.com/Sunbridge%20Sign%20Trees-SMALL.395.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;}

    Here's instructions of how to add the CSS:

    How to Inject Custom CSS Codes 

     

    You can see it working here on a clone of your form:

    https://form.jotformpro.com/72575539857979

     

  • SunbridgeInstitute
    Replied on October 3, 2017 at 12:30 PM

    Will this CSS code fix this problem on all my forms? I'm just curious why this is suddenly not working on many of our forms, when it was set up properly to start with, and has worked for a couple years before ceasing to work? Do I have to add custom CSS for all of our many forms to correct this problem? It seems like a bandaid approach, when I would rather solve the root problem.

    Thank you.

  • aubreybourke
    Replied on October 3, 2017 at 12:50 PM

    No the CSS code will only affect the form where you inject the code. You would need to do it for each form with this approach.

    I have cleared your form caches. So try loading them again now. Maybe it might fix the problem.

  • SunbridgeInstitute
    Replied on October 3, 2017 at 1:11 PM

    Yes, this seems to have done the trick. Clearing the form caches has solved the image problem. Now I have about 30 other forms, most of which are experiencing similar problems. How can I clear the form caches for all of these?

    Thank you.

  • Marvih
    Replied on October 3, 2017 at 1:14 PM

    Go to your https://support.jotform.com/myaccount/settings. Then click "Clear Cache" Button.

    How to set background image as fixed cover Image 1 Screenshot 20


  • SunbridgeInstitute
    Replied on October 3, 2017 at 1:19 PM

    Okay, this solved one of our forms, but not all the rest. For example, this one here still has the problem:

    https://www.jotform.com/build/70375228846968

    In fact, most of them still have the problem.

    Can you suggest a fix that will solve all of them, rather than me having to write a ticket for each one of them?

    Thank you.

  • Kevin Support Team Lead
    Replied on October 3, 2017 at 1:40 PM

    I have already injected the following CSS code to your the theme you used: 

    html.supernova {

        background-repeat: no-repeat;

        background-attachment: fixed;

    }

    So the background fixed setting is not overwritten by the form settings through the form designer. 

    However, you may need to remove the template from your form and add it again in order to get the updates applied to your forms.

    If you do so, I would recommend you to copy the already injected CSS code on your forms, you may instead just inject the same code I injected to the template, but note that this should be injected in all your forms as there is not a way to update all the forms at the same time. 

    I hope this helps.