Skip to main content

Add a background image

Updated over a month ago

Background images help reinforce your brand, highlight seasonal or campaign-specific themes, and create a polished, professional look.

You can apply a background image to the entire experience or customize it for a single screen. Background images can only be aligned to the top, middle, or bottom of the screen, if you need more flexibility, we recommend adding your image as an element.

Before you begin

  • Determine your screen layout to know how many images you need and how they will interact with your screen elements.

  • Prepare your background image file according to design specs.

  • Ensure text contrast and readability by planning for overlays or text box styling if needed.


Add an image to a single screen

  1. From the Editor, select the screen you want to add the video background to.

  2. Click the background area of the screen.

  3. In the editor window, select the media upload icon.

  4. Double click the image you want to use.

  5. The image is added to the background.


Next steps

  • Preview your experience across device types to verify the background renders consistently.

  • Use color overlays or text styling to ensure accessibility.


FAQ

Can I use a GIF as a background?

  • No. Only static images (JPG, PNG) or videos are supported for backgrounds.

Why does my image look blurry?

  • Use high-resolution images sized for 1920x1080 or similar to prevent pixelation.

Is there a file size limit for background images?

  • While there isn’t a strict limit, we recommend optimizing for web (under 2MB) to reduce load times.

How can I adjust a background image so it doesn’t cut off content or overlap with text?

  • If you're trying to reposition a background image, such as moving it slightly higher to prevent overlapping text or ensure everything fits on one screen, note that background images can only be aligned to the top, middle, or bottom of the screen. This setting is found under Position when editing the background image. Because background images cannot be freely moved, a more flexible option is to add the image as an element instead of setting it as a background. This allows you to manually reposition it and reorder it in relation to other content on the screen.

Why is a background image appearing in the preview but not in the Editor view of my screen?

  • This often occurs when Dynamic Variants have been applied to the 'Primary Section' of the screen. These variants can conditionally display different background images that won’t appear in the default Editor view. To resolve this, check the Primary Section for any dynamic variants and remove them if they are no longer needed. If the image still shows in the preview but not in the editor, please contact support for assistance.

Did this answer your question?