Background Modifier

Overview

Use the Background modifier to place one or more layers behind another layer. By default, the Background modifier inserts a Rounded Rectangle behind the layer that you apply the modifier to.

With the background Rounded Rectangle selected in the Layers panel, you can adjust the shape from the Inspector panel.

You can also replace the background with other elements from the Insert + menu by deleting the Rounded Rectangle and inserting something new.

Your background can comprise of more than one layer. When you stack two layers on top of each other, an implicit ZStack is applied so, in some cases, you may want to embed them in either a VStack or an HStack to make them visible.

<div class="callout note">Note
‍Hold and drag the layers in the Layers panel to set their order.</div>

Alignment

The Background modifier comes with an Alignment parameter used to position the implicit ZStack that groups the background layers. By default, the Background modifier uses Center Alignment, but you can also set it to align to the Leading or Trailing edge.

If you specify an Alignment for the background, it applies to the implicit ZStack rather than to the individual layers within the Background modifier. The foreground layers will move together as a unit, with the smallest layer remaining in the center of the stack.

For example, the black square and the gray circle move as a unit to align the stack to the Leading or Trailing edge of the horizontal bar, with the circle remaining centered in the square in each case.

• Top Leading - The background layers are aligned to the Leading top corner of the modifier layer
• Top - The background layers are aligned to the top center of the modifier layer
• Top Trailing - The background layers are aligned to the Trailing top corner of the modifier layer

• Leading - The background layers are aligned in the center of the screen, but to the Leading edge of the modifier layer
• Center - The background layers are aligned in the center of the screen, vertically and horizontally of the modifier layer
• Trailing - The background layers are aligned in the center of the screen, but to the Trailing edge of the modifier layer

• Bottom Leading - The background layers are aligned to the bottom Leading corner of the modifier layer
• Bottom - The background layers are aligned at the bottom center of the modifier layer
• Bottom Trailing - The background layers are aligned to the bottom Trailing corner of the modifier layer

You can also align your background to the Baseline of a Text layer and to the Leading, Center, or Trailing edges.

To control the placement of individual layers inside the background, either use a different Background modifier for each item or wrap the layers in an explicit ZStack that has its own alignment.