Background images can make your typeform more appealing and help you inject your own brand into the design.
You can add or edit the background image of your typeform under the Design options within the Create panel. We explain how this is done in the steps below. To find out how to insert images, GIFs and video into questions, go read this Help Center article.
Add a background image
You can use an image from our integrated Unsplash-powered library, or upload your own.
1. Open a typeform and click on the Design icon in the sidebar.
2. Click on the Customize tab within the Design menu. Now click the Add button next to ‘Background image’.
3. Now you can find an image using our Unsplash image library. Simply type in a search term, and scroll through the images until you find one you like:
4. Click that image so it’s highlighted, then the Add image button will become available. Hit this, and the photo will appear as your background!
Tip! All the images you find with the Unsplash image search tool are free to use however you like. You can use them for private or commercial purposes. You have a non-exclusive copyright license to download, copy, modify, distribute, and use photos from the library, without the need for permission or attribution to the photographer (though giving credit is always appreciated).
5. Alternatively, you can upload an image from your computer. Click the Upload tab, then you can drag and drop your image, or browse for it using the link:
The image will display in the Live preview panel. Click the ‘Save as new theme’ button if you’re happy with it.
Tip! This background image will be applied to your entire typeform, including Welcome and Thank You Screens. If you want to have different backgrounds on your questions, except Welcome and Thank You Screens, you can do that with the Layout feature in question settings. Find out how in this article.
Warning! The size limit to uploaded images is 2MB and 1680×1050 pixels. Also note that when you upload a background image the platform automatically takes the average of the colors and sets a background color based on that. You can change this color manually after adding the background image. The color will stay as defined until you upload (the same or another) background image again.
Customize the background image
Layout and Brightness settings can be customized to modify your background image’s appearance and behavior.
Brightness can be adjusted using the slider. There are three Layout options available:
- Repeat: the background repeats itself horizontally and vertically, like a mosaic.
- Full screen: to stretch/shrink the background image to 100% width and height of the window.
- No repeat: the background is displayed as is, centered, without resizing.
Warning! When using your own images, it’s important to avoid designing with a fixed window width and height in mind, as screens will vary in sizes and shape depending on the device the typeform will be displayed on. Because screen sizes vary it isn’t possible to add banner images at the top or bottom of the typeform.
You can use PNG files with transparent backgrounds, but remember that your background color will be visible under your PNG image. The following PNG has a transparent background…
In the example below it has been used as background image with the following settings:
- Background color: #36CFE3
- Brightness: low
- Scaling: repeat
{[{article.replace}]}
{[{video.duration}]}