Customize "Background Image" . How to delete uploaded images from Designer?

  • Profile Image
    CAPOULTRY
    Asked on May 28, 2015 at 01:43 PM

    I've created my own theme and would like to see a custom Background Image. The image is not displaying properly. Is there a certain image size I need to have before loading? Also is there a way to delete images I have uploaded?

  • Profile Image
    Sammy
    Answered on May 28, 2015 at 02:49 PM

    In you form inject the following css code

    .supernova {
        background-attachment: fixed;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
    }
     
    The section that i modified was background-attachment: fixed; this prevents the image from moving when you scroll.
     
     
    Kindly confirm if this addresses you issue
  • Profile Image
    CAPOULTRY
    Answered on May 28, 2015 at 03:17 PM

    Yes that fixed the issue. Now is there a way shrink the image so it's not so zoomed in?

     

    http://form.jotformpro.com/form/51376654673969

  • Profile Image
    david
    Answered on May 28, 2015 at 04:39 PM

    Chang the background size attribute will allow you to control the scaling.  Currently it is set to stretch to the size of the screen:

    .supernova {
        background-attachment: fixed;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
    }
     
    If you change "cover" to "fixed", the image will remain the size of the actual image.  You can also adjust the image to a specific size with this code:
     
    background-size: 800px 1000px;
     
    That way you can specify the exact size you would like the image to be stretched to.  Here is what it would like to stretched to 1000px by 1000px:
     
     
     
     
     
  • Profile Image
    CAPOULTRY
    Answered on May 28, 2015 at 04:50 PM

    So I tried that but it completely shrank it. http://form.jotformpro.com/form/51376654673969

    Here is what the code looks like...

    .supernova {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    background-size: 1000x1000;
    }
    .supernova {
    background-image: none;
    background-image: url("http://www.jotform.com/uploads/CAPOULTRY/form_files/monterey.jpg");

  • Profile Image
    david
    Answered on May 28, 2015 at 05:28 PM

    The code should be:

    .supernova {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    background-size: 1000px 1000px;
    }

    Yours was just off by a tiny bit.

  • Profile Image
    CAPOULTRY
    Answered on May 28, 2015 at 06:59 PM

    Awesome works great!

     

    One last question. Is there a way to delete uploaded background images?
  • Profile Image
    Aury
    Answered on May 28, 2015 at 07:35 PM

    Hello CAPOULTRY,

    Actually, up to now there is no a way to remove/delete the uploaded background images since there is no point to delete them if were uploaded to be used in forms, for instance, if you have uploaded a logo of your Company, removing it form will show an empty space for the missing image.

    However, I find it is a very interesting question, I will forward a feature request to our developers so they can consider the implementation of allowing to delete uploaded the background images whenever are considered for no longer use.

    You will be contacted via this thread once they have an update on this matter.

    If you need further assistance please let us know.