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
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 BackgroundsOdicci 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
|
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.