Skip to content
  • There are no suggestions because the search field is empty.

How Do I Set a Background for My Experience? Design Studio

Your background is one of the first things a player sees, so getting it right — sized correctly and consistent with your frames — makes a big difference to how polished your experience feels.

Overview

  • Setting a Global Background
  • Overriding the Background Per Frame
  • Desktop vs Mobile Backgrounds
  • Image Specifications
  • Troubleshooting Tips
Setting a Global Background

The background is set at the overall experience level and applies across every frame unless you override it.

1. Open your experience in the Design Studio

2. In the left-hand menu, select Design

3. Under General Settings, find the Background option

4. Choose either a brand colour (solid fill), or a background image, uploaded from your device or selected from your Gallery

The Background Image and Background Colour options under Design

Selecting a background from the Gallery

 

This becomes the default background for every frame in your experience.







Overriding the Background Per Frame

Want a different background on a specific frame — for example, a unique image on your Success Frame? You can override the global background on a frame-by-frame basis:

1. Click into the frame you want to customise

2. Select the Cog icon on that frame to open its settings

3. Under Desktop Background, choose an alternative image for that frame

4. Under Mobile Background, choose an alternative image optimised for smaller screens

Frame Settings — Upload desktop background and Upload mobile background

Frame-level backgrounds always take priority over the global background, so you can mix a consistent overall look with standout moments on key frames (like a Success Frame or big reveal).

Desktop vs Mobile Backgrounds

Odicci lets you set backgrounds separately for desktop and mobile, since screen shapes are very different:

  • Desktop Background — shown on larger viewports
  • Mobile Background — shown on phones; sides will be cropped to fit the display if the aspect ratio doesn't match exactly

Tip: If you only upload a desktop image, it will still display on mobile but may crop more aggressively — for best results, upload a dedicated mobile version.

 


Image Specifications

Stick to these specs to keep your background sharp and avoid upload errors:

Device

Minimum Resolution

Aspect Ratio

Max File Size

Desktop

1920 x 1280 px

3:2

1MB

Mobile

1920 x 1280 px

3:2

1MB


Any image above the minimum resolution will work fine as long as it keeps the same 3:2 aspect ratio. Supported formats are JPG, JPEG, PNG, WebP, and GIF (limited support).

Troubleshooting Tips
  • Image won't upload? Double-check it's under 1MB — this is the most common blocker.
  • Background looks cropped oddly on mobile? Upload a dedicated mobile background rather than relying on the desktop image being auto-cropped.
  • Background not updating on one frame? Check whether that frame has its own override set under the Cog icon — frame-level settings will always beat the global background.
  • Need the same background everywhere except one frame? Set your global background once in Design > General Settings, then only override the single frame that needs to differ.