How to put a background image in a specific field?

  • max123jot
    Asked on January 13, 2018 at 8:55 AM

    for fields 21-24 (upload files)

    is there a method to place a background image behind each input field as a way to remind the user the exact view for the file to upload?

  • Dexter_R
    Replied on January 13, 2018 at 9:51 AM

    There is no method to place a background image behind each field, but there is  solution to do that with your custom CSS.

    Url image is just an example, don't copy that link. You should upload your preferred image on the server, and then insert link into brackets, as in the example below. 

    Small hint: The width and height of the background image should be the same as width and height of the input fields.

    .form-all #id_150 {

         background:url(https://www.jotform.com/uploads/Dexter_R/form_files/back_example.jpg);

    }

    Hope, this will help. 


  • max123jot
    Replied on January 13, 2018 at 5:43 PM
    ok
    i think i am getting there
    i simply took your image and uploaded it to my form
    but i do not know how to id a url for an image that i would up load
    also, how to determine the size of the field
    please
    tx for your help
    m
    ...
  • David JotForm Support Manager
    Replied on January 13, 2018 at 8:56 PM

    If you need to find the IDs of the fields, please check this guide: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    If you need to set the size of the background image, you can use the following:

    background-size: 100px 100px;

    Example: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #id_150 {

    background : url(https://www.jotform.com/uploads/Dexter_R/form_files/back_example.jpg);

    background-size: 100px 100px;

    background-repeat: no-repeat;

    }