Background image is repeated when viewed on a mobile device.

  • Profile Image
    seokansascity
    Asked on April 11, 2019 at 08:33 PM

    Good Day Jot Form!!!!!...

    I just made a new form. The image is set to "fixed" in the background and on the desktop it works great. No repeat image..

    However, when looking at it on my cell phone (Galaxy Note),, The image forms a repeat forming 2 picture blocks.. 

     

     

    Also, when sending the form the "Thank You" shows fine but I remain at the bottom of my page for both desktop and cell. 

     

    Any thoughts on how to fix these 2 issues?

     

    Thanks Kindly..!

    Wendell

  • Profile Image
    Jed_C
    Answered on April 11, 2019 at 10:15 PM

    I checked your site on Galaxy Note 9 and didn't find the image to be repeated.

    Here's what I see on my end.

    1555035273background.png

    As for your other question, I will be answering it on a separate thread here https://www.jotform.com/answers/1790854 shortly.

  • Profile Image
    seokansascity
    Answered on April 11, 2019 at 10:43 PM
    hey jed.. thanks..... however i was referring to the image after
    send.....not before send...
    ...
  • Profile Image
    jherwin
    Answered on April 11, 2019 at 11:31 PM

    We are sorry for the inconvenience this may have caused. Could you please show us a screenshot of the image you're referring so we can further investigate this issue?

    Guide: How-to-Post-Screenshots-to-Our-Support-Forum

    Looking forward to your response.

  • Profile Image
    seokansascity
    Answered on April 11, 2019 at 11:36 PM

    The issue is only on the cell phone (galaxy 8). It shows 3 repeating pictures... but I check in the advanced layout and it shows the box checked for fixed background - not repeat - The desktop or tablet is not affected... The link below provides the image... 

    Page URL:
    https://fourpeaksrvrental1.godaddysites.com/make-reservation 

  • Profile Image
    jherwin
    Answered on April 12, 2019 at 12:07 AM

    I see. I was able to replicate it on the cloned form. I will make a few test and will update you via this thread.

    Thank you for your patience.

  • Profile Image
    jherwin
    Answered on April 12, 2019 at 12:16 AM

    Please inject the custom CSS code below to your form:

    body.thankyou {
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-attachment: fixed !important;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • Profile Image
    seokansascity
    Answered on April 12, 2019 at 12:11 PM

    Good day..!!

    On the desktop the image is fixed and fills the space properly after 'send'.

    On my tablet it leaves a smaller area of a white block where the form was under the image - after send (thank you notice)

    On the cell it leaves a black space in place of the image after send and is the size of the form (3 image repeats fill the space)...

    I do not perceive this to be an issue with people using the form as they will use it then exit and be on their way not knowing the difference. However, in my opinion it looks terrible for web design and I think jotform would want to fix it since they have such high quality products.

    Its not the end of the world issue...lol.. but to me it looks unprofessional. 

    However, the product (contact form) works well with no issues and super fast responder time (mere seconds).. 

  • Profile Image
    BJoanna
    Answered on April 12, 2019 at 01:47 PM

    I tested your embedded form using an emulator on iPhone X, Galaxy 8 and Nexus 7 and I cannot replicate the issue you reported. 

    15550911486.PNG

    15550909435.PNG

    Can you please provide us a screenshot of the issue and tell us exactly which devices and browser are you using. 

  • Profile Image
    BJoanna
    Answered on April 12, 2019 at 01:49 PM

    To upload a screenshot, please follow the steps form this guide:

    How to Post Screenshots to Our Support Forum

  • Profile Image
    seokansascity
    Answered on April 12, 2019 at 02:12 PM

     ^ that was me, sorry. was not logged in...

  • Profile Image
    Kevin_G
    Answered on April 12, 2019 at 04:17 PM

    Upon testing your form I can see it displays the image properly, example: 

    1555100137screenshot_01.png

    1555100160screenshot_02.png

    May you please share us some screenshots about how it looks on your end? 

    You may upload the images on this forum following the guide shared by my colleagues before, attached images via email replies will not reach this thread. 

  • Profile Image
    seokansascity
    Answered on April 12, 2019 at 04:39 PM

    hey Kevin.. Thanks for your reply..

    Here is my screenshot from my Galaxy Core. The jotform image sits above. however, the black below is actually about 2x shown in this image. The screenshot couldnt handle the total length..

    Thanks!..

    1555101458screengrab-20190412-153007.jpg

  • Profile Image
    Jed_C
    Answered on April 12, 2019 at 06:32 PM

    I was able to replicate it. I'm still investigating on what causes this and I will get back to you once I found the cause. Thank you for your patience.

  • Profile Image
    seokansascity
    Answered on April 12, 2019 at 06:47 PM

    Jed, thanks.. the tech support from jotform has been phenomenal..!! which is why I brought this to the attention of the forum.. with the quality of product jotform makes, I figured they wanted to slay this issue.. As for me, certainly its not problematic as indeed it works great... not that pretty to look at, but that, it could be the ole galaxy is just too old.. My guess is you all will fix it and be on your way to the next perplexing issue!..  lol..

    ~ cheers

  • Profile Image
    Jed_C
    Answered on April 12, 2019 at 07:29 PM

    I injected the code below in your form to adjust the height of the background image. Please check if the adjustment is ok with you.

    body.thankyou {

        background: url(http://www.jotform.com/uploads/EltonCris/form_files/photo-1415639636295-61ae91a98b39.jpg) rgb(255, 255, 255);

        background-repeat: no-repeat !important;

        background-attachment: scroll;

        background-position: center top;

        background-size: auto;

        background-attachment: fixed;

        background-size: cover;

        font-family: Exo 2, sans-serif;

        font-size: 16px;

        color: rgb(255, 255, 255);

        text-align: center;

        height: 1500px;

    }

    Here's how it should look like:

    1555111695Dashboard - Google Chrome 2019

    The black background is now replaced with a background image. Looking forward for your response. 

  • Profile Image
    seokansascity
    Answered on April 12, 2019 at 08:16 PM

    Jed. thank you! yes, much better... it still has the long height to it but at least its an image and not a black box... so overall I think its better. I just checked the desktop and tablet and they work as expected. So over all looks good.. Probably just the phone is quite old... 

    although any future readers may not be able to see the effort you put into fixing this, indeed I did notice and am appreciative of the high quality support. Super fast, professional and, well, damn good....

    Best Regards

  • Profile Image
    jherwin
    Answered on April 12, 2019 at 09:23 PM

    We're glad to know that everything works perfectly for you.

    On behalf of my colleague, Jed_C, you're most welcome! Feel free to contact us anytime should you have any questions or concerns and we will be glad to help you.

    Cheers! :)