Background Image Size

  • Profile Image
    MYSCS
    Asked 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.

     

     

     

  • Profile Image
    Scott
    Answered 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.