How to add image as background in swiftUI?

In swiftUI, apple doesn’t provide any dedicated background image or color modifier. It lets us add any kind of background view using its background() modifier.

For example, this creates a text view with a large font, then places a 100×100 image behind it.

    var body: some View {
        Text("Travellers heaven")
            .font(.system(size: 48))
            .foregroundStyle(.white)
            .padding(50)
            .background(
                Image("kashmir")
                    .resizable()
            )
        }

However, it doesn’t need to be an image all the time. For example, this creates the same text view then places a 50×50 red circle behind it. Let’s see it in black theme.

    var body: some View {
        Text("India")
            .font(.system(size: 48))
            .foregroundStyle(.white)
            .padding(50)
            .background(
                Circle()
                        .fill(.red)
                        .frame(width: 50, height: 50)
            )
        }

Background views take up as much space they need to be fully visible. But if you want you can have them be clipped to the size of their parent view using the clipped() modifier

    var body: some View {
        Text("Apple development")
            .font(.largeTitle)
            .padding()
            .background(
                Circle()
                    .fill(.teal)
                    .frame(width: 100, height: 100)
            )
            .clipped()
    }

With this new modifier, we can use any view as background modifier. We can even use another text view as background.