Introduction

The background of an experience is frequently used to display content and information that should be visible across all scenes. Another popular use is the inclusion of looping videos and other effects to capture the attention of passers-by.

There are three options for creating a background in your experience and each option is best suited for different scenarios. This article discusses these three background options.

NOTE: Technically, there is a fourth background option: When the scene & experience backgrounds are set to transparent AND all background experience layers are at least partially empty, the experience as a whole becomes transparent. In this case, third party applications "behind" a running Intuiface experience will be visible and, optionally, interactive. For more about a transparent background, see this article.

Option One: Scene Background

When to use it

When

• This background is scene-specific and thus could be different for every scene.
• Exception: Cannot be used to play videos in Player for Tablets or Player for Kiosks

How to create it

The background of a scene can be set to a color, an image, a video or rendered completely transparent.

To configure the background of a scene you can either :

• Right-click an empty area of the current scene and choose either the "Set image background" or "Set video background" option
  
  OR
• Right-click any image or video in the active scene and select the menu option Set as scene background
  
  OR
• Open the Properties panel - either by right-clicking and selecting the "Show properties" link or clicking the "Properties" button in the top right of Composer - and then modify the "Background" property.
  

If modifying the "Background" property directly in the Properties panel, you can choose between

• Color   assign a color and an opacity
• Image   assign an image
  • For a perfect fit, the image must have the same dimensions as the target display. For example, if the display dimension is 1920 pixels x 1080 pixels then for a perfect fit the image must also be 1920 x 1080.
  • Use the "Fill Behavior" property to configure how an image larger or smaller than the scene should be displayed. For details about the "Fill Behavior" property, see this article.
  • To specify the color that will be displayed outside a background image smaller than the scene, first set the "Background" property to Color and select your color. Then set the "Background" property to Image and specify what you want to show.
• Video   assign a video that can either play once or loop
  • For a perfect fit, the video must have the same dimensions as the target display. For example, if the display dimension is 1920 pixels x 1080 pixels then for a perfect fit the video must also be 1920 x 1080.
  • Use the "Fill Behavior" property to configure how a video larger or smaller than the scene should be displayed. For details about the "Fill Behavior" property, see this article.
  • To specify the color that will be displayed outside a background video smaller than the scene, first set the "Background" property to Color and select your color. Then set the "Background" property to Video and specify what you want to show.
• Transparent   (for Windows OS only) render the background invisible so the desktop and running third party applications can be seen. In addition, optionally, you can enable users to interact with your running experience and running third party applications at the same time. For details, see this article.

If you are working with measurements other than pixels in your graphic design tool, determine the target display size in pixels and use your graphic design tool to translate that value into your preferred measurement. Traditionally, Microsoft computers default to a pixel density of 96 pixels per inch / 38 pixels per cm while Apple computers default to 72 per inch / 28 per cm. Today's modern displays often have greater densities - i.e. more pixels per inch/cm.

Editing impact

Each scene background exists independently of one another so modifications to one scene background will have no affect on any other scene background.

If the scene background is visible, the other two background options (discussed below) will be blocked from view.

About scene-to-scene transitions: Even if two scenes have the same scene background, the transition effect applied to scene-to-scene navigation will visibly affect the scene background. In addition, a background video will restart.

Option Two: Background experience layer(s)

When to use it

• Best used when you want to have a small number of backgrounds shared across multiple scenes.
• Unlike with scene and experience backgrounds, a background experience layer can contain any combination of assets and collections, no different from a scene layer.
• Content in these layers remain on display during scene-to-scene navigation. For example, a video playing in an experience background layer will play uninterrupted during the navigation.

NOTE: Everything written here about background experience layers applies to foreground experience layers as well. The only difference is that background experience layers are located behind all scene layers while - no surprise - foreground experience layers are located in front of all scene layers.

How to create it

To create an experience background layer, follow the steps here.

As each experience layer is global to an experience - i.e. there aren't multiple instances, one per scene - you can edit a background experience layer while viewing any scene and that change will be reflected in all scenes. You can also choose whether or not to include an experience layer in a given scene using the Included experience layers property of that scene.

NOTE: The scene background needs to be transparent for a background experience layer to be visible.

Editing impact

Uniquely among the three background options, only a background experience layer can include any combination of assets and collections - i.e. it is not limited to a single color, image, video or full transparency. (For more information, see our general discussion of scene and experience layers.

In addition, multiple background experience layers can be combined to create a single background. And since layers can be individually shown and hidden via triggers and actions, the combination of multiple background experience layers could create some interesting visual effects.

The scene background must be set to Transparent for a background experience layer to be visible.

About scene-to-scene transitions: Transition effects applied to scene-to-scene navigation will have no affect on content in background (or foreground) experience layers. This includes assets like videos and audio files which will play without interruption throughout the navigation.

Option Three: Experience background

When to use it

• Best used when you want to have a single background shared across all scenes.
• Content in this background remains on display during scene-to-scene navigation. For example, a playing video as an experience background will play uninterrupted during the navigation.
• Exception: Cannot be used to play videos in Player for Tablets or Player for Kiosks

How to create it

The background of an experience can be set to a color, an image, a video or rendered completely transparent.

To configure the experience background, either:

• Open the Properties panel for the project. (The project is the top-most item in the Scene Structure panel.) Look for the Background appearance" section of the **Appearance properties tab.
  
  OR
• Right-click any image or video in the active scene and select the menu option Set as experience background

If modifying the "Background" property directly, you can choose between:

• Color   assign a color and an opacity
• Image   assign an image
  • For a perfect fit, the image must have the same dimensions as the target display. For example, if the display dimension is 1920 pixels x 1080 pixels then for a perfect fit the image must also be 1920 x 1080.
  • Use the "Fill Behavior" property to configure how an image larger or smaller than the experience should be displayed. For details about the "Fill Behavior" property, see this article.
  • To specify the color that will be displayed outside a background image smaller than the experience, first set the "Background" property to Color and select your color. Then set the "Background" property to Image and specify what you want to show.
• Video   assign a video that can either play once or loop
  • For a perfect fit, the video must have the same dimensions as the target display. For example, if the display dimension is 1920 pixels x 1080 pixels then for a perfect fit the video must also be 1920 x 1080.
  • Use the "Fill Behavior" property to configure how a video larger or smaller than the experience should be displayed. For details about the "Fill Behavior" property, see this article.
  • To specify the color that will be displayed outside a background video smaller than the experience, first set the "Background" property to Color and select your color. Then set the "Background" property to Video and specify what you want to show.
• Transparent   (for Windows OS only) render the experience background invisible. If all three background options (listed in this article) are set to Transparent, the desktop and running third party applications can be seen side-by-side with Intuiface. In addition, optionally, you can enable users to interact with your running experience and running third party applications at the same time. For details, see this article.

If you are working with measurements other than pixels in your graphic design tool, determine the target display size in pixels and use your graphic design tool to translate that value into your preferred measurement. Traditionally, Microsoft computers default to a pixel density of 96 pixels per inch / 38 pixels per cm while Apple computers default to 72 per inch / 28 per cm. Today's modern displays often have greater densities - i.e. more pixels per inch/cm.

Editing impact

The experience background is global to an experience - i.e. there aren't multiple instances, one per scene - so you can edit the experience background while viewing any scene and that change will be reflected in all scenes

It is not possible to choose whether or not the experience background is included within a scene. However, both the scene background needs to be transparent and all background experience layer(s) need to be empty for the experience background to be visible. (NOTE: If there is content in all background experience layers but that content does not cover 100% of the screen, the experience background will appear in uncovered areas.)

About scene-to-scene transitions: Transition effects applied to scene-to-scene navigation will have no visible affect on content in the experience background. For example, a video as the background element will play through the navigation without interruption.

Determining the appropriate size for background media

If you are working with measurements other than pixels in your graphic design tool, determine the target display size in pixels and use your graphic design tool to translate that value into your preferred measurement. Traditionally, Microsoft computers default to a pixel density of 96 pixels per inch / 38 pixels per cm while Apple computers default to 72 per inch / 28 per cm. Today's modern displays often have greater densities - i.e. more pixels per inch/cm.