What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Background Image Size

    Asked by MYSCS on October 10, 2016 at 10:13 PM

    Hi there,

    Can I have the exact size for the background image?Would like to set a background image around a form as below.

     

     

     

    Page URL:
    https://www.jotform.com/MYSCS/ageloc-live-young-contest

    background image size image size JotForm uploads
  • Profile Image
    JotForm Support

    Answered by Scott on October 11, 2016 at 05:54 AM

    Hi there,

    I believe that you are trying to overcome the problem of overlapping between the form and the background image when resizing your browser window. If this is the case, it can be resolved through by making your form and your background image, responsive.

    I need you to add these lines to your form by using our "Inject CSS" tab and give it a try and see if this helps you with your problems.

     

    .supernova .form-all, .form-all {
        width : 470px!important;
        margin-top : -25px;
    }

    #input_6 {
        width : 350px;
    }

    #input_22 {
        width : 350px;
    }

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
        .supernova .form-all, .form-all {
            max-width : 400px!important;
            margin-top : -25px;
        }

    }

    @media screen and (min-width: 10px) and (max-width: 480px){
        .form-all:before {
            content : "" !important;
            background-image : url("https://www.jotform.com/uploads/MYSCS/form_files/MYBN_Contest_Forms_2016_Page_one.jpg") !important;
            display : inline-block !important;
            height : 320px !important;
            position : absolute !important;
            background-size : 100% 100% !important;
            background-repeat : no-repeat !important;
            width : 100% !important;
        }

    }



    Here is a screen capture that can guide you to the Inject CSS tab. Do not forget to save your changes once you pasted your code.

     

    Please let us know about if this worked for you or not. And if I misunderstood your wishes, please give further details about what you are trying to accomplish.

     

    Scott.