Which is the best size for a full screen background image?

  • charitychallenge
    Asked on February 25, 2015 at 7:51 PM

    Tried to upload a background image via the Designer:

    Page Background Repeat Fixed Cover

     

    (ignore Repeat ticked in the paste above - I'll set it to Fixed).

    However, when I do this, the image is right aligned - I cannot find an option to set it to center.  Alternatively, is there a particular dimension I can create the image in to ensure it stays centered in relation to the form?

    Thanks

  • charitychallenge
    Replied on February 25, 2015 at 8:20 PM

    Solved the problem - it was just displaying right-aligned in the designer.  Preview was okay.

     

    I do have another question though.  Is there a predetermined form dimension for background that is set to Fixed and Cover?  I am particularly trying to determine the dimensions of a background image set to full screen.

  • raul
    Replied on February 25, 2015 at 9:30 PM

    I'm glad to see that you were able to fix the problem that you were first having.

    Regarding your second question, I'm not quite sure if I understand it correctly.
    Do you want to know which is the best size for a background to be set as fixed?

    If this is correct, you need to know first where are the most portion of your users are going to see your form, for example, is your form designed to be filled in phones or tablets? or desktops or laptops? This can give you an idea of the size that the background should have to cover up the entire screen.

    I found this article: http://www.webmalama.com/the-best-full-screen-background-image-sizes-for-web-design/ that could give you a better idea of the best size for you.

    If you were referring to something else, please let us know and we'll be happy to help.
    Thank you.

  • charitychallenge
    Replied on February 26, 2015 at 12:03 AM

    Thanks

     

    I understand that size depends on what device/screen size the average user uses.  I just thought there might be some optimal size.  Anyway. no problems there, I can apply a large background to ensure it is fully in view.

     

    Also a question about a tiny border that I am unable to get rid of.  Best to check the form on preview:

    formID=50557233312952

    I have gone into color and set all options as transparent, but a fine outline still exists.  Any way you know how to remove this?

     

    Thanks

     

  • Charlie
    Replied on February 26, 2015 at 9:18 AM

    Hi,

    To remove the box shadow outline surrounding the form, you can do that by using this custom CSS code.

    .form-all {

        -webkit-box-shadow: none !important; 

    }

    Add it inside the Form Designer Tool under the CSS tab.

    Which is the best size for a full screen background image? Image 1 Screenshot 20

    Do let us know if it works in your end.

    Thank you.

  • charitychallenge
    Replied on February 26, 2015 at 7:18 PM

    Thanks

    I still saw the problem after adding the CSS code.  So I tried a different browser and it was fine.

    The problem therefore is viewing this via Firefox (v36).  When I switched to Chrome it was okay.  But I then tested via IE 11 and the frame still shows there.

    Can you please again look at the form (with the added CSS code) to see what I mean and suggest whether there is anything else I can do to ensure this is compatible with the latest versions of both Firefox and IE?

     

     

  • Charlie
    Replied on February 26, 2015 at 9:05 PM

    Hi,

    Sorry about that, could you try replace the previous code that I gave with this one:

    .form-all {

        box-shadow : none !important;

    }

    This should work on Chrome, Firefox and IE.

    Let us know if you're still having problems on this.

    Thank you.

  • charitychallenge
    Replied on February 27, 2015 at 3:04 AM

    Many thanks!

  • Charlie
    Replied on February 27, 2015 at 7:14 AM

    You're welcome. Glad it worked.

    If you need any assistance again or have other concerns, please do not hesitate to contact us again.

    Thank you.