Add a background image to your typeform

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.

Location of the Design icon in Typeform

2. Click on the Customize tab within the Design menu. Now click the Add button next to ‘Background image’.

Screenshot showing location of the background image icon

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!

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.

Screenshot showing theme settings

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:

  • No repeat: the background is displayed as is.
  • 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.

Screenshot showing layout and brightness settings

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…

Image of umbrella symbol with transparent background

In the example below it has been used as background image with the following settings:

  • Background color: #36CFE3
  • Brightness: low
  • Scaling: repeat

Screenshot showing tiled background image

Was this article helpful?
Thanks!