---
title: "Background"
description: "The background modifier places a secondary view behind a primary view, while keeping the primary view in charge of size."
url: https://www.swiftuifieldguide.com/layout/background
markdown_url: https://www.swiftuifieldguide.com/layout/background.md
---
> Convenience Markdown export of the HTML page. Interactive samples, diagrams, and visualizations stay on the canonical page.
# Background

The `background` modifier places a secondary view behind a primary view. During layout, the primary view determines its size first, and that size is then proposed to the background. In the example below, the background is applied to the padded text.

> Pretty-printed code from Basic

```swift
Text("Hello, world")
    .padding(12)
    .background {
        Color.blue
            .opacity(0.2)
    }
```

> Interactive example on HTML page: Basic.

This means the background is dependent on the size of the primary view, just like [overlay](/layout/overlay). The reported size of the modifier stays the size of the primary child, even if the background itself draws beyond those bounds.

> Pretty-printed code from Primary Size

```swift
HStack {
    Text("One")
    Text("Two")
        .background {
            RoundedRectangle(cornerRadius: 6)
                .fill(.purple)
                .opacity(0.4)
                .padding(.horizontal, -20)
        }
    Text("Three")
}
```

> Interactive example on HTML page: Primary Size.

The interactive tree below shows the same relationship more directly: the background returns the size of its primary child, and proposes that size to its secondary child.

> Interactive example on HTML page: Tree.

The `ShapeStyle` overloads can also clip the background to a shape. In the example below, the background still follows the size of the text, but SwiftUI paints it inside a capsule using `background(.blue, in:.capsule)`.

> Pretty-printed code from Shape Style Shape

```swift
Text("Label")
    .foregroundStyle(.white)
    .padding(12)
    .background(.blue, in: .capsule)
```

> Interactive example on HTML page: Shape Style Shape.

There is another subtle but important distinction in SwiftUI: `background(.blue)` and `background Color.blue '}` do not call the same overload. The first uses the `ShapeStyle` variant, which conceptually paints an implicit rectangle behind the view. The second uses the view-builder overload and inserts an actual background view.

This difference matters for the safe area. The `ShapeStyle` overload defaults to ignoring all safe area edges, while the view-builder overload does not. If we want the `ShapeStyle` overload without that behavior, we can pass an explicit empty edge set: `background(.blue, ignoresSafeAreaEdges: [])`. In the example below, only the default `background(.color)` form stretches behind the bottom inset.

> Pretty-printed code from Safe Area Variant

```swift
Text("Hello, world.")
    .font(.title)
    .foregroundStyle(.white)
    .frame(maxWidth: .infinity,
           maxHeight: .infinity)
    .background(Color.accentColor)
    /*
    .background(Color.accentColor,
                ignoresSafeAreaEdges: [])
    */
    /* .background { Color.accentColor } */
    .safeAreaInset(edge: .bottom, spacing: 0) {
        MyToolbar()
    }
```

> Interactive example on HTML page: Safe Area Variant.

When you want a background whose size follows the primary view, use `background`. When the two sizes should be independent, a [ZStack](/layout/zstack) is often a better fit. For more detail about the safe area interaction, see the [safe area page](/layout/safe-area#gotchas).