SwiftUI fullscreen image background

Question

I want to have a full screen image in the background. I have implemented this:

struct LoginView: View {
    var body: some View {
        VStack {
            Spacer();
            Text("Hallo");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Spacer();
            }.background(Image("Background LaunchScreen")
                .resizable()
                .aspectRatio(UIImage(named: "Background LaunchScreen")!.size, contentMode: .fill)
                .clipped())
            .edgesIgnoringSafeArea(.all)
    }
}

When I remove the spacers, the image is no longer displayed in full screen mode.
Surely that can be solved differently?

And if I turn the iPhone in the simulator to the side, I have left and right white stripes.
How can I change this?

Answer 1

Here's a possible solution using GeometryReader and ZStack:

import SwiftUI

struct LoginView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("LaunchImage")
                    .resizable()
                    .aspectRatio(geometry.size, contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)
                VStack {
                    ForEach (1...10, id: \.self) { _ in
                        Text("Hallo")
                            .foregroundColor(Color.white)
                    }
                }
            }
        }
    }
}

#if DEBUG
struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}
#endif

Results

Answer 2

Using only ZStack:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack{
            Image("bg")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(minWidth: 0, maxWidth: .infinity)
                .edgesIgnoringSafeArea(.all)
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
            .padding()
        }
    }
}

#Preview {
    ContentView()
}

Answer 3

To get my VStack correct I had to do this: ZStack(alignment: .leading)