Background Images: How to add background image to a form
Adding a background image to your form is one way to make the form beautiful. To add a background image to any of your forms:
- Access the form’s customise page by clicking the Customise icon for the form from your Forms page. If you just created or edited the form, you will be automatically redirected to the Customise page after saving.
- On the Customise page, click the Background Image & Logo section from the Customisation menu options by the left-hand side of the page.
- Click on the 'Upload Image' button to upload an image from your device or the 'Image Link' button to use an image that is publicly accessible online.
- If you clicked on the 'Upload Image' option, browse through your files and select an image from your device. If you clicked on the 'Image Link' button, copy the public URL of the image from the source website and paste the image link in the field provided.
- The image will be displayed in the preview window once it has been uploaded. You can click the Change button to select a different image and the Clear button is to remove or delete the background image
- Once the image has been uploaded, you are provided with more options such as the option to change Background Image Size, Make image fixed and Repeat image. I will talk about each of these options below.
- The background image size provides you with the option to change how your image is displayed and there are 3 options available. Cover, Auto, and Contain.
- Cover is the default option and means the image will stretch to fit the entire screen space available. This is the best option as the image will always be fully displayed when your form is viewed on any device. If you are unsure, leave the option as 'Cover'.
- Auto retains the original size of the added image and is displayed in your form that way. The image may not fit the entire screen space available, view the form to see how it is displayed. If the entire screen space is not covered, you can enable the 'Repeat image?' option so the image is duplicated to cover any white space.
- Contain fits the image to the screen using the height of the added image, i.e. the image will only scale to the screen space by the image height and not width. This means the image may not cover the entire screen space thereby leaving white space. You should view the form to see how it is displayed and also keep in mind that the form will be viewed on different screens. To cover any white space, enable the 'Repeat image?' option so the image is duplicated to cover any white space.
- The 'Make image fixed?' option determines if the image scrolls as the form page is scrolled through or if the image will be fixed/static when the form page is scrolled through, it is turned off by default (image scrolls). To enable the option or to see how it works, click the toggle button so it turns green.
- The 'Repeat image?' option determines if the background image will be repeated (tile background). This option works well with small sized images and also with images which are not properly fitted to the screen when the Auto or Contain image size is selected. This option is turned off by default (no repeat), to enable the option or to see how it works, click the toggle button so it turns green. Do note that the repeat image option does not work with the Cover (Default) background image size option or with large sized images when the selected image size is Auto size, this means you should remember to change the background image size from Cover to Auto or Contain whenever you enable the repeat image option.
- To ensure the text in your form is legible regardless of the image uploaded, a thin white overlay is added to the image. You cannot directly remove this overlay but you have an option to filter the way the image is displayed by adding a Page Background Colour from the Form Colours section to the background image. You can play around with colours by dragging the colour picker around the palette until you find a colour that fits best with the image. To remove any added colour, click on the 'Clear' button in the colour palette.
- If necessary, you can also change the Form Text Colour from the Form Colours section to make the form text more legible.
- For images added via a link, it is advisable to download and upload the image directly to our servers as linked images may cause your form to load slowly depending on how heavy the image is in size and the website the image is being referenced from. Linked images from public websites can also be made unavailable publicly or removed at any time.
- When you are done with all changes, click the 'Preview Form' button to see how the image will be rendered to your form users. The preview mode pane in the Customise page is not the actual form size, the way the image is displayed (in size) on the page will be different from how it is actually displayed on your form.
- To remove a background image, click on the Clear button in the Background Image section of the customise page.
You can get free to use and nice background stock images from websites like: