How to display the background image of the form in full screen?

How to display the background image of the form in full screen?

By default, the background image is displayed in tiles. You can change that to full screen with the help of some custom CSS coding. Here is how you can display the background image of the form in full screen:

1. Go to the SettingsThemes section of your form and click on the Use custom CSS link.

3. Enter this code and hit Apply:

body { 
background-size: 100%; 
}

The background image will now be displayed in full screen. If it does not, set the style as important:

body { 
background-size: 100% !important; 
}

You can disable the form frame in the Background & Form Frame subsection to make the design of your form look more clean. Unfortunately, if you embed the form on a webpage, the background image will disappear.

For more dynamic web forms, upload a gif and amuse your visitors with some live animation in the background of your form. Here is an example.

Note: If you have uploaded a gif in ThemesBackground&Form Frame, the animation might not work on your form. Therefore, you’ll need to upload the gif on the web and copy its URL. Next, add this code in Use custom CSS:

body { 
background-image: url('/*Here add the image URL of your gif*/');  
background-size: 100%; 
}

You can adjust the position of your form on screen by using the margin-left or margin-right property with the assigned value in pixels (e.g. margin-left:450px;), such as in this example:

body { 
background-size: 100%; 
margin-left:450px;
}

how to display the background image of the form in full screen

Olivian Stoica
Olivian Stoica
Oli's enthusiasm for helping our fellow users led him to write thorough know-how articles and tutorials that would make form building a bliss on 123FormBuilder.

3 Comments

  1. Marsha Canada says:

    Thanks! This is great!

  2. piers thurston says:

    can you tell me how to reduce the gap between the heading and the content boxes please? thanks. Relating to this form http://www.piersthurston.com/

    thanks

    • Hello, Piers! Your message has been forwarded to the Support Team. They will contact you ASAP to address your problem. Thank you!

      For other questions and assistance, please contact our Support Team here.

Leave a Reply

Your email address will not be published. Required fields are marked *