How to add background image outside the form area?

  • Profile Image
    rpv
    Asked on September 02, 2013 at 02:37 AM

    I am trying to insert CSS code to create a repeating, non-scrolling image outside the borders of my form (in the extra space on each side of the form). I have been reading the forum and tried the various methods, but nothing seems to work. I have tried .jpr, .png, and .gif images. I have tried putting the url in with single quotes, and without them. Can you check out my codse and see what I am doing wrong? My Centralize Cadet Information Database (CCID) form can be found at http://form.jotformpro.com/form/32280236036951

     

    Thanks in advance for your help.

  • Profile Image
    ashwin_d
    Answered on September 02, 2013 at 07:29 AM

    Hello rpv,

    You need to inject the following custom css in your form:

    body, html{background: url('https://www.jotform.com/uploads/rpv/form_files/Crestmont Wallpaper.png') repeat;height: 100%;}

    I have already changed your form's css and injected the above css and it is displaying the background image appripiately.

    Here is the guide which should help you to inject the custom css: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Thank you!

  • Profile Image
    rpv
    Answered on September 02, 2013 at 10:52 AM

    Thank you. That did the trick. I added the 'background-attachment:fixed' to keep the background from scrolling with the form, and it works just the way I want now!

    Thanks again.

  • Profile Image
    ashwin_d
    Answered on September 02, 2013 at 11:16 AM

    Hello rpv,

    I'm very pleased that I was able to help you.

    Thank you!