How to Change the Background Color of a SwiftUI View

Why this happens

A SwiftUI View is transparent until you give it something to draw. There is no backgroundColor property to set, because a background in SwiftUI is just another view layered behind the one you already have. The .background modifier is what creates that layer.

The second half of the confusion is layout. .background paints exactly the frame of the view it is attached to. A VStack containing two Text views is only as tall as those two texts, so .background(Color.black) produces a black rectangle hugging the text — not a black screen. The white you see above and below is the window behind it.

The third wrinkle is the safe area. Since iOS 15, a style passed to .background bleeds into the safe area by default, which is why some backgrounds appear to fill the screen and others stop at the notch or the home indicator. Once you know which of these three things you are fighting, the fix is one line.

How to fix it

1. Attach .background to the view you actually mean

For a card, a row, or any view with a defined size, the modifier is all you need:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello SwiftUI!")
        }
        .padding()
        .background(Color.black)
        .foregroundStyle(.white)
    }
}

Opacity works the same way, because Color is a value you can modify:

.background(Color.black.opacity(0.5))

If the view has no intrinsic size, expand it first and then paint it:

VStack {
    Text("Hello SwiftUI!")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.black)

Order matters: .background must come after .frame, otherwise it paints the smaller, pre-expansion frame.

2. Fill the whole screen with a ZStack

When you want the entire screen colored and your content laid out normally on top, put a Color behind everything:

var body: some View {
    ZStack {
        Color.purple
            .ignoresSafeArea()

        VStack(spacing: 20) {
            Text("Overlay").font(.largeTitle)
            Text("Example").font(.title)
        }
        .foregroundStyle(.white)
    }
}

Color is itself a view that expands to fill the space offered to it. Without .ignoresSafeArea() it stops at the safe area margins, leaving bars of the window color at the top and bottom. The content in the VStack still respects the safe area, which is what you want — the text should not slide under the notch.

3. Use .overlay to keep content inside the safe area

The mirror image of the ZStack approach: make the color the root view and hang the content on top of it.

var body: some View {
    Color.purple
        .ignoresSafeArea(.vertical) // ignore only for the color
        .overlay {
            VStack(spacing: 20) {
                Text("Overlay").font(.largeTitle)
                Text("Example").font(.title)
            }
            .foregroundStyle(.white)
        }
}

Keep .ignoresSafeArea on the color alone. If you move it to the outer container, the content ignores the safe area too and your title ends up under the status bar.

4. Let the style bleed into the safe area on purpose

Since iOS 15, a style that touches a safe area edge bleeds into it. That means this is often enough to color the whole screen:

var body: some View {
    VStack {
        Text("Hello, World!")
        Divider()
        Spacer()
    }
    .background(Color.purple)
}

The VStack reaches the bottom edge because of the Spacer, so the purple continues into the home indicator area. Remove the Spacer and the color shrinks with the stack.

The underlying API is background(_:ignoresSafeAreaEdges:), whose edges parameter defaults to .all. If you want the opposite behaviour — a background that stays strictly inside the safe area — say so explicitly:

.background(Color.purple, ignoresSafeAreaEdges: [])

A “style” here is not only a Color. It can be a Material (.thinMaterial, .ultraThinMaterial), a gradient, or a hierarchical style such as .secondary.

5. Style the bars around TabView and navigation

On iOS 15 and later the tab bar is no longer translucent by default, so a screen background runs straight into it. If you want the bar to pick up a material instead, add a zero-height shape that touches the bottom safe area edge:

TabView {
    VStack {
        Text("Hello, World!")
        Divider()
        Spacer()
        Rectangle()
            .frame(height: 0)
            .background(.thinMaterial) // bleeds into the tab bar
    }
    .background(Color.purple)
    .tabItem {
        Text("Tab 1")
        Image(systemName: "wifi")
    }
}

The same trick works at the top of a navigation container: a zero-height Rectangle with .ultraThinMaterial placed above your content bleeds into the navigation bar.

On iOS 16 and later there is a more direct route for the bars themselves:

.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(Color.purple, for: .navigationBar)

6. Fill the container with containerRelativeFrame (iOS 17+)

If you want a background sized to the container rather than to the content, containerRelativeFrame gives you that without a GeometryReader:

VStack {
    Text("Container Relative Frame")
        .font(.title)
}
.containerRelativeFrame([.horizontal, .vertical])
.background(Gradient(colors: [.teal, .cyan, .green]).opacity(0.6))

On a root view the container is the device, so the gradient covers the screen.

7. Skip the code with the SwiftUI Inspector

For a quick experiment, ⌘-click the view in the canvas, choose Show SwiftUI Inspector, and set Background there. Xcode writes the modifier into your source, which is a fast way to confirm which view is actually being painted.

How to prevent it

• Remember that .background paints the frame of the view it is attached to, not the screen.
• Put .frame(maxWidth: .infinity, maxHeight: .infinity) before .background when the view has no size of its own.
• Keep .ignoresSafeArea() on the color view only, never on the container holding your content.
• Prefer ZStack with a Color for full-screen backgrounds; it reads more clearly than chained overlays.
• Use .foregroundStyle rather than the deprecated .foregroundColor in new code.
• Check the canvas with a dark color first — white-on-white gaps are easy to miss.

FAQ

Why does my background stop before the edges of the screen?

The color is attached to a view that does not reach the edges, or the safe area is clipping it. Add .ignoresSafeArea() to the color, or expand the view with .frame(maxWidth: .infinity, maxHeight: .infinity) before applying the background.

What is the difference between .background and a ZStack?

.background layers a view behind one specific view and inherits its size. A ZStack layers siblings that are each offered the same space, so a Color inside it fills the whole container. Use ZStack for screen backgrounds and .background for cards, rows and controls.

Can I use a custom color or a hex value?

Yes. Color(red:green:blue:) takes 0–1 doubles, and Color(uiColor:) wraps a UIColor if you already have one. Once you have a Color, it behaves like any other style in .background.