How do I have my background fixed to the background of the form

  • vfstakeyouth
    Asked on March 6, 2019 at 1:58 PM

    I've added an image for the background and played around with the advanced features to have it as a cover, fixed, repeat, etc and can't seem to get the image to fill the entire background (i.e. cuts off and is blank at the bottom) or it runs too long and I lose the bottom of my image.  Not sure what setting I need to adjust so that the image fits.  If I need to resize my image, I can do that too but not sure what it needs to be before uploading.  

     

    Jotform Thread 1752981 Screenshot
  • vfstakeyouth
    Replied on March 6, 2019 at 2:18 PM

    I tried this in CSS based on another forum but it still cuts off the bottom of the trees:

    .supernova {


    background: url("https://www.jotform.com/uploads/vfstakeyouth/form_files/camp%20background.5c7f2fc8d68df2.31184107.jpg") no-repeat center center fixed;


    -webkit-background-size: cover;


    -moz-background-size: cover;


    -o-background-size: cover;


    background-size: cover;


    }

    1551899873Jot form Screenshot2 Screenshot 10

  • Welvin Support Team Lead
    Replied on March 6, 2019 at 2:57 PM

    Please try using percentage for the positioning, try below custom CSS codes:

    .supernova {

        background: url(https://www.jotform.com/uploads/vfstakeyouth/form_files/camp%20background.5c7f2fc8d68df2.31184107.jpg) no-repeat;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        -o-background-size: cover;

        background-size: cover;

        background-attachment: fixed;

        background-position: 100% 70%;

    }


    My screen is 21", 1920 x 1080 resolution, getting this view:

    15519021972019 03 07 012 Screenshot 10

  • vfstakeyouth
    Replied on March 6, 2019 at 6:01 PM

    Thanks.  That improved it to match the image that you are sharing but it means that it's only showing 70% of the image and still not the entire image but you get the majority of it so I think it's fine.  It would be helpful to know if the images need to be sized to a certain ratio to ensure that the whole image is captured.  In this image, it's fine but I can see it being an issue for other images.  

  • Jed_C
    Replied on March 6, 2019 at 9:26 PM

    The size of the background image would depend on the device that your users would most likely use. So if your users will use a mobile device, you can tailor the image for mobile devices, but if they use a desktop, you will need to use a larger image with high resolution.

    You can check out this article which may give you a better idea of the best size for you: The Best Full Screen Background Image Sizes for Web Design.

    Let us know if you have any questions or if you need further assistance.