How do I get the background in swiftui to scale to fit the whole screen

Question

I'm still pretty new to swift UI, almost finished a project however no matter what I try I cannot get the background to take up the whole screen space, with the code below it still has a white border surrounding the image on all sides, I've tried ignoresSafeArea and scaletofill and everything else chat gpt could come up with. I'm not sure if its an issue with how I downloaded the image (as a png) because I feel like this should be fairly simple. Thanks in advance for any help. :)

This is the code for the view:

struct BirdView: View {
var body: some View {
    VStack {
        Text("Opening Page")
            .padding()
            .offset(x: 0, y: -130)
            .multilineTextAlignment(.center)
    }
    .background(Image("purplegradient"))
    .ignoresSafeArea()
}

}

And this is how the view is getting called:

struct ContentView: View {

var body: some View {
        VStack {
            BirdView()
    }
}

}

Answer 1

You could try a different approach for your background image to take up the whole screen space, rather than using a background(...), use a ZStack, for example:

struct BirdView: View {
    var body: some View {
        ZStack {
            Image("purplegradient").resizable().ignoresSafeArea()
            Text("Opening Page")
                .padding()
                .offset(x: 0, y: -130)
                .multilineTextAlignment(.center)
        }
    }
}

Answer 2

struct BirdView: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Opening Page")
                    .padding(.top, 130)
                    .frame(maxWidth: .infinity)
                    .multilineTextAlignment(.center)
            }
        }
        .background(
            Image("purplegradient")
                .resizable()
                .edgesIgnoringSafeArea(.vertical)
        )
    }
}

In order to allow the background to cover the entire screen, the entire content has been enclosed in a ScrollView.

To ensure that the text is not pushed offscreen when using .offset(x: 0, y: -130) within the ScrollView, it is necessary to include either a Spacer() or apply padding to the top.

To expand the ScrollView horizontally and make it fill the entire screen, the .frame(maxWidth: .infinity) modifier has been added. Without this, the width of the Text would determine the frame size and the content would only occupy a portion of the screen.

When using an image as a background, it is advisable to make it resizable using the .resizable() modifier. Additionally, .edgesIgnoringSafeArea(.vertical) has been used to ensure that the background extends beyond the vertical edges, including any navigation bar or tab bar present.

I hope this explanation helps!