How to ignore safe area for a background with a linear gradient and image in swiftUI?

I have a VStack like this:

    var body: some View{
        VStack{
            //some view
        }
        .background(
            ZStack{
                LinearGradient(gradient: Gradient(
                    colors: [
                        .yellow_500,
                        .yellow_500,
                        .yellow_500,
                        .yellow_50
                    ]), startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea(.container, edges: [.top])
                
                
                Image(R.image.home_bg_try.name)
                    .resizable()
                    .scaledToFill()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .ignoresSafeArea(.container, edges: [.top])

            }
//                .offset(y: -20)
        )
    }

I want the image to be displayed without considering the safe area, which currently results in a white space appearing at the top, as shown in this image: (https://i.stack.imgur.com/knRdm.png).

I attempted to fix this issue by adding an offset, but I noticed that the height of the white space varies across different models.

How can I resolve this problem?

Your current setup has the right idea, but if you want to completely ignore the safe area for the VStack's background, you should apply the .ignoresSafeArea() modifier on each of the backgrounds.

The white space you are seeing might be a result of the VStack not filling up the whole screen.

Try moving .ignoresSafeArea() modifier outside of the ZStack, and apply it to the whole VStack. Here is the updated code:

var body: some View {
    VStack{
        //some view
    }
    .background(
        ZStack {
            LinearGradient(gradient: Gradient(
                colors: [
                    .yellow_500,
                    .yellow_500,
                    .yellow_500,
                    .yellow_50
                ]), startPoint: .top, endPoint: .bottom)
                .resizable()
                .aspectRatio(contentMode: .fill)

            Image(R.image.home_bg_try.name)
                .resizable()
                .scaledToFill()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    )
    .ignoresSafeArea()
}

By using .ignoresSafeArea(), you instruct SwiftUI to layout the VStack and its background across the whole screen, including under the status bar and home indicator on iPhone models with edge-to-edge screens.

Additionally, you might want to apply .edgesIgnoringSafeArea(.all) instead of .ignoresSafeArea() in certain situations. For example, if your view doesn't play well with safe area insets when it's embedded in another view hierarchy, you might find .edgesIgnoringSafeArea(.all) works better. However, in SwiftUI 2.0 and later, .ignoresSafeArea() is generally recommended.

background never exceeds the size of the View it is applied to. So if your VStack doesn't cover the safe area, any background applied to it won't do so either, even if the background has an ignoresSafeArea modifier applied to it.

You can however, use a ZStack instead, which will size itself based on its largest element, which in this case will be your safe area ignoring background.

var body: some View {
  ZStack {
    background

    VStack{
      //some view
    }
  }
}

private var background: some View {
  ZStack {
    LinearGradient(gradient: Gradient(
      colors: [
        .yellow_500,
        .yellow_500,
        .yellow_500,
        .yellow_50
      ]), startPoint: .top, endPoint: .bottom)
    .ignoresSafeArea(.container, edges: [.top])

    Image(R.image.home_bg_try.name)
      .resizable()
      .scaledToFill()
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .ignoresSafeArea(.container, edges: [.top])
  }
}