Responsive backdrop enables you to insert a color or image to occupy the entire area of a website container. This is useful for 100% width use cases as well as other dynamically-sized containers on your website.
You can set the backdrop for the entire experience in the Editor, by clicking the Backdrop button.
Once clicked, the "Responsive Backdrop Options" window will appear.
Inside the window, you have the option to:
- Select the backdrop content (color or image).
- Select the backdrop sizing, where the backdrop should fit (to experience, or to container).
There are two types of backdrop content:
- Color: choose a color from the picker or provide the hex value.
- Image: select an existing image from the image library or drag a new image from your desktop.
There are two ways to fit a backdrop:
- Fit to Experience: backdrop will be visible as a background within the experience scene.
- Fit to Container: backdrop will fit the dimensions of the container where the experience is placed.
You can get a quick preview of both approaches directly from the window itself.
To see your backdrop behavior in your web site, you will need to publish the experience to a test page or staging environment. When using Creator's preview mode, the behavior looks very different as the backdrop size depends on the container where the experience is placed (which is the full window in the case of the preview).
Below you can see the same experiences with a backdrop image fit to container, placed in two different containers. Notice how the image fills out the containers and since they have different aspect ratios, you will see different section of the image.
Toggle Active Layers in the Editor
There are two ways you can toggle the backdrop on and off in the editor:
- right click on a scene and select "Show Active Layer Only"
- use the shortcut, "M", when in the Editor
You will then see your background, overlay, and backdrop on all scenes as default. See below an example of how a scene looks before and after toggling active layers.
Toggling on backdrop will result in showing the color or image (the latter in this example) on all scenes. Notice how overlay content (previous and next scene arrows) appears as well, along with backdrop and background scene elements (if any).
Please sign in to leave a comment.