--- title: How Do I Set a Background for My Experience? Design Studio description: How to set Backgrounds on gamification experiences for your CRM, Marketing and loyalty experiences. --- [Skip to content](https://howto.odicci.com/en-gb/guides/how-do-i-set-a-background-for-my-experience-design-studio#main-content) [Contact us](https://howto.odicci.com/en-gb/guides/kb-tickets/new?hsLang=en-gb) [![ODICCI-Horizontal-1](https://howto.odicci.com/hs-fs/hubfs/ODICCI-Horizontal-1.png?width=150&height=48&name=ODICCI-Horizontal-1.png)](https://howto.odicci.com/en-gb/guides?hsLang=en-gb) - [Getting Started](https://howto.odicci.com/en-gb/guides/getting-started) - [Experiences](https://howto.odicci.com/en-gb/guides/experiences) - [Integrations](https://howto.odicci.com/en-gb/guides/integrations) - [Settings](https://howto.odicci.com/en-gb/guides/settings) Open main navigation Close main navigation - [Getting Started](https://howto.odicci.com/en-gb/guides/getting-started) - [Experiences](https://howto.odicci.com/en-gb/guides/experiences) - [Integrations](https://howto.odicci.com/en-gb/guides/integrations) - [Settings](https://howto.odicci.com/en-gb/guides/settings) - [Contact us](https://howto.odicci.com/en-gb/guides/kb-tickets/new) - [Contact us](https://howto.odicci.com/en-gb/guides/kb-tickets/new) [Contact us](https://howto.odicci.com/en-gb/guides/kb-tickets/new?hsLang=en-gb) How can we help you? - There are no suggestions because the search field is empty. 1. [Odicci How To](https://howto.odicci.com/en-gb/guides?hsLang=en-gb) 2. [Design Studio](https://howto.odicci.com/en-gb/guides/design-studio?hsLang=en-gb) # 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 ![](https://howto.odicci.com/hs-fs/hubfs/undefined.png?width=390&height=890&name=undefined.png) *The Background Image and Background Colour options under Design* *Selecting a background from the Gallery* ![](https://howto.odicci.com/hs-fs/hubfs/undefined-2.png?width=670&height=366&name=undefined-2.png) This becomes the default background for every frame in your experience. ![](https://howto.odicci.com/hs-fs/hubfs/undefined-3.png?width=670&height=345&name=undefined-3.png) **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 ![](https://howto.odicci.com/hs-fs/hubfs/undefined-1.png?width=670&height=403&name=undefined-1.png) *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. - [Getting started](https://howto.odicci.com/en-gb/guides/getting-started?hsLang=en-gb) - [Experiences](https://howto.odicci.com/en-gb/guides/experiences?hsLang=en-gb#main-content) - [Games](https://howto.odicci.com/en-gb/guides/experiences?hsLang=en-gb#games) - [Quizzes](https://howto.odicci.com/en-gb/guides/experiences?hsLang=en-gb#quizzes) - [Rewards](https://howto.odicci.com/en-gb/guides/experiences?hsLang=en-gb#rewards) - [Refer A Friend](https://howto.odicci.com/en-gb/guides/experiences?hsLang=en-gb#refer-a-friend) - [Design Studio](https://howto.odicci.com/en-gb/guides/design-studio?hsLang=en-gb#main-content) - [Frames](https://howto.odicci.com/en-gb/guides/design-studio?hsLang=en-gb#frames) - [Components](https://howto.odicci.com/en-gb/guides/design-studio?hsLang=en-gb#components) - [Integrations](https://howto.odicci.com/en-gb/guides/integrations?hsLang=en-gb#main-content) - [Customer Data Platforms](https://howto.odicci.com/en-gb/guides/integrations?hsLang=en-gb#customer-data-platforms) - [E-Commerce](https://howto.odicci.com/en-gb/guides/integrations?hsLang=en-gb#e-commerce) - [Other](https://howto.odicci.com/en-gb/guides/integrations?hsLang=en-gb#other) - [Loyalty](https://howto.odicci.com/en-gb/guides/integrations?hsLang=en-gb#loyalty) - [Webhooks](https://howto.odicci.com/en-gb/guides/integrations?hsLang=en-gb#webhooks) - [Reporting](https://howto.odicci.com/en-gb/guides/reporting?hsLang=en-gb) - [Settings](https://howto.odicci.com/en-gb/guides/settings?hsLang=en-gb) - [FAQs](https://howto.odicci.com/en-gb/guides/faqs?hsLang=en-gb) # Odicci Copyright © 2025, Odicci Ltd