You can add a Backdrop to any page through the “Backdrop” icon (in the top menu bar). Backdrops can also be duplicated directly into your site from the Design Lab: clip “copy” and then paste the Backdrop directly into any page on your site.
Backdrops range from simple — gradients and still images — to the complex — slideshows, videos and interactive animations.
Page Layout with Backdrops
By default, the backdrop is rendered behind the active page. If that page has a Content Background color chosen through the page settings, that color will be displayed over the backdrop.
Use the “Split with page content” option to display the backdrop side-by-side with the page content, as if the browser viewport were a two-page editorial spread. Use the “Width” scrubber inside the settings to change the relative widths of the backdrop and page content. At mobile viewport dimensions, a split backdrop will display above the page content instead of next to it.
Use the “Clip when scrolling” option to fix the backdrop content to the browser viewport permanently. Instead of scrolling out of view when the page content does, the page content will instead “clip” the backdrop as it scrolls in or out of the viewport. This effect is most noticeable when used with stacked pages inside a set.
Experimenting with Backdrops
Each backdrop is controlled by several if not a dozen or more parameters; overcome this complexity to find a combination of settings that uniquely fits your site design.
To get started, use the Randomize button in the top right corner of the Backdrop Settings to discover the range of possibilities within a single backdrop. From there, experiment with the individual settings to see how each one interacts with the image you’ve chosen and the page as a whole.
With the exception of Gradient, all backdrops are image-based. Since each backdrop treats each image differently, an image that looks good in one backdrop will not necessarily work well in others.
All backdrops will crop and/or enlarge images so that they fill the entire surface area of the page. The Wallpaper backdrop also includes a “Focus” setting, which allows you to pick a point in your image that will always be visible regardless of the size of the browser viewport. This is useful for ensuring a specific feature of an image will never be cropped out of view.
Wallpaper and Video backdrops have a “Fit” option that scales your media to fit the confines of the page layout, with no cropping.
Wallpaper and Morph backdrops have a “Cycle” option that displays any number of images in succession, as in a slideshow.