Background image is not showing

  • CMRImarcomms
    Asked on January 30, 2017 at 2:55 AM

    Hi,

     

    I have uploaded a background image for my form but it is showing white. I have tried removing it and uploading it again, but that doesn't work.

    Please can you help me?

    Thank you!

    Jotform Thread 1050101 Screenshot
  • Support_Management Jotform Support
    Replied on January 30, 2017 at 3:37 AM

    I saw the image you uploaded on your form. I grabbed the URL of that bg image and used it with CSS to set the background image.

    Just inject the following CSS Codes:

    .supernova {

        background-image: url(https://www.jotform.com/uploads/CMRImarcomms/form_files/CMRI20160424_DSC5058_web.181.jpg);

    }

    Here's where/how to inject the codes:

    Background image is not showing Image 1 Screenshot 30

    Related guide: How-to-Inject-Custom-CSS-Codes

    RESULT: 

    Background image is not showing Image 2 Screenshot 41

  • CMRI
    Replied on January 30, 2017 at 3:45 AM

    Thank you but the problem is that when I insert the CSS, the image is showing multiple times in squares and not the full screen like we need it to and how you have shown.

    How can i fix this?

     

    Background image is not showing Image 1 Screenshot 20

    https://form.jotform.co/CMRI/event-request-form

  • Charlie
    Replied on January 30, 2017 at 3:53 AM

    Hi,

    Edited the code shared by my colleague, try this one instead: 

    .supernova {

        background-image : url(https://www.jotform.com/uploads/CMRImarcomms/form_files/CMRI20160424_DSC5058_web.181.jpg);

        background-repeat: no-repeat !important;

        background-attachment: fixed !important;

        background-size: cover !important;

    }

    You can see how this looks like in this test form that I have: https://form.jotform.com/70291753743964 

    Let us know if that works. 

  • Kiran Support Team Lead
    Replied on January 30, 2017 at 9:12 PM

    It seems that your last response is not posted on the thread. Glad to see that the issue is now resolved. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

    Thank you for using JotForm!