The background image works great in the preview but not on my actual iPad device

  • Profile Image
    gavinrae
    Asked on June 18, 2020 at 02:50 PM

    Hi, I'm using the Transparent 'Techy' theme. The form scrolls over the background pic on the form great and on the preview for iPad and phone. But when I open the form link on my actual iPad it is just a zoomed image of part of the form. Looks bad.


    Please help!

    Gavin

  • Profile Image
    Welvin
    Answered on June 18, 2020 at 06:32 PM

    Hello Gavin,

    I fixed that by injecting a custom CSS codes in the form.

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px)

    and (-webkit-min-device-pixel-ratio: 2) { 

    .supernova:after{

          content:"";

          position:fixed; 

          top:0;

          height:100vh; 

          left:0;

          right:0;

          z-index:-1; 

          background: url(https://www.jotform.com/uploads/EltonCris/form_files/keyboard-498396_12801.png) center center;

          -webkit-background-size: cover;

          -moz-background-size: cover;

          -o-background-size: cover;

          background-size: cover;

          background-position: center top;

    }

    }

    You can check that in the settings:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    The custom CSS codes is just a trick. You can find the following line:

    background-position: center top;

    The line displays the background centered, showing the mouse at the top.

    If you want to display the hand and keyboard, change that top to left.

    If you want to display the wristwatch, change top to right

     

  • Profile Image
    gavinrae
    Answered on June 18, 2020 at 09:28 PM

    thank you !!!!!!!!!!!

  • Profile Image
    gavinrae
    Answered on June 18, 2020 at 09:42 PM

    got it to work on the iPad's but not the phones??.... 

  • Profile Image
    ashwin_d
    Answered on June 19, 2020 at 02:24 AM

    I have injected few additional custom CSS code in your form. Please test your form in mobile device and get back to us if the issue persists. 

    We will wait for your response.