How to put a background image in a specific field?

  • Profile Image
    max123jot
    Asked on January 13, 2018 at 08: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?

  • Profile Image
    Dexter_R
    Answered on January 13, 2018 at 09: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. 


  • Profile Image
    max123jot
    Answered on January 13, 2018 at 05: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
    ...
  • Profile Image
    BDAVID
    Answered on January 13, 2018 at 08: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;

    }