How to stop background image being cut off on mobile

Hi team

I have created an optin page https://form.jotform.co/71242195992866

When I view the page on mobile the image is cut off (however on the Jotform Preview page it shows as covering the screen)

Can you please advise how I can have the image cover the full screen on mobile devices?

Thank you

Please try to add the following CSS codes to your form and see if that would fix the issue you're having in your mobile device.

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

    .supernova {

        background-attachment: fixed !important;

    }

}

How-to-Inject-Custom-CSS-Codes

Thank you.

Thank you for your response ... unfortunately this has not made any difference :(

Please remove the code provided by my colleague earlier and copy and paste the below one:

.supernova {

        background-repeat: no-repeat;

        background-attachment: fixed;

    }

@media screen and (max-width: 480px){

    .supernova {

        background-image : url("https://www.jotform.com/uploads/iAssist/form_files/Island%20cropped.295.jpg");

        background-size : cover;

        height : 100%;

        overflow : hidden;

    }

    body {

        height : 100%;

        overflow : scroll;

        -webkit-overflow-scrolling : touch;

    }

}

I tested and that should work as intended.

Please let us know how it worked.

Thank you!

Thank you! That worked perfectly!!

Ever so grateful :D