Overlay and background modifiers in iOS Swift

Introduction

Overlay and background modifiers let you add views on top of or behind other views easily. This helps decorate or highlight parts of your app.

You want to add a label or icon on top of an image.

You want to put a colored shape behind text to make it stand out.

You want to add a border or shadow behind a button.

You want to layer multiple views without changing their layout.

Syntax

iOS Swift

view.overlay(overlayView)
view.background(backgroundView)

The overlay modifier places a view on top of the original view.

The background modifier places a view behind the original view.

Examples

This adds a red circle border on top of the text.

iOS Swift

Text("Hello")
  .overlay(
    Circle()
      .stroke(Color.red, lineWidth: 2)
  )

This puts a yellow circle behind the star image.

iOS Swift

Image(systemName: "star.fill")
  .background(
    Circle().fill(Color.yellow)
  )

This puts blue behind the text and white overlay text on top.

iOS Swift

Text("SwiftUI")
  .background(Color.blue)
  .overlay(
    Text("Overlay")
      .foregroundColor(.white)
  )

Sample App

This example shows a text with a light green rounded rectangle behind it and a green border on top. It uses background to add the fill shape and overlay to add the border shape.

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    Text("Hello, SwiftUI!")
      .font(.title)
      .padding(40)
      .background(
        RoundedRectangle(cornerRadius: 15)
          .fill(Color.green.opacity(0.3))
      )
      .overlay(
        RoundedRectangle(cornerRadius: 15)
          .stroke(Color.green, lineWidth: 3)
      )
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Important Notes

You can use any view as overlay or background, including shapes, images, or other text.

Overlay and background views automatically match the size of the original view unless you specify otherwise.

Use padding to create space between the original view and its overlay or background.

Summary

Overlay adds a view on top of another view.

Background adds a view behind another view.

They help layer views without changing layout structure.