Learn how to add text overlay on top of an image in SwiftUI. Achieve it by using the .overlay() modifier which layers a second view in front of other view.
First of all, import an image into your Xcode project. I won’t go into details how to achieve it but if you’d like to learn, check out how to add image to Xcode project in SwiftUI.
Secondly, add the imported image into ContentView and apply appropriate modifier in order to scale it and fit within the screen edges.
Thirdly, create a separate view, called ImageOverlay, which contains the desired text with appropriate styling. Wrap the text view in a ZStack to create a nice sticker impression with rounded corners, opacity and background color.
Finally, use the .overlay() modifier on the Image, passing the ImageOverlay view and desired alignment.
The complete code should look like this:
struct ImageOverlay: View {
var body: some View {
ZStack {
Text("Credit: Ricardo Gomez Angel")
.font(.callout)
.padding(6)
.foregroundColor(.white)
}.background(Color.black)
.opacity(0.8)
.cornerRadius(10.0)
.padding(6)
}
}
struct ContentView: View {
var body: some View {
VStack {
Image("fall-leaves")
.resizable()
.scaledToFit()
.overlay(ImageOverlay(), alignment: .bottomTrailing)
Spacer()
}
}
}
And the result looks like this:

If you’d like to explore more about how to use images in SwiftUI, take a look at our complete SwiftUI Image tutorial.
Related tutorials:
- How to use SF Symbols in SwiftUI
- How to create a Button in SwiftUI
- Advanced SwiftUI button styling and animation