I have a structure in my View like this

   NavigationView {

              VStack {

                  HStack {
                        NavigationLinks
                  }

                   List {                           
                              NavigationLink {

Now my issue is how i can give a background image that shows uniformly over all these overlapping views, is there any way its possible, i have been trying ZSatck and .overlay with no success, any suggestion will be very helpful , thanks...

ZStack {
  Image(...)
  HStack {
    NavigationLinks
  }
  List {                           
    NavigationLink {

does not work?

@Hatsushira - i tried , but it does not work, may be some thing wrong on my end , here is the code snippet of what i am dealing with, thanks

 NavigationView {

            VStack {

                    HStack {

                        NavigationLink {
                            Text("Demo")
                        } label: {
                            Image("Demo")
                                .resizable()
                                .frame(width: 150)
                        }

                        Spacer()
                        NavigationLink {
                            Text("Demo")
                        } label: {
                            Image("Demo")
                                .resizable()
                                .frame(width: 150)
                        }
                    }
                    .padding()
                    .frame(height: 150)

                    List {
                        NavigationLink {
                            Text("Demo")
                        } label: {

                            customText(image: "Demo", str: "Demo")
                                .frame(maxWidth: .infinity)

                        }

                        NavigationLink {
                            Text("Demo")
                        } label: {
                            customText(image: "Demo", str: "Demo")
                                .frame(maxWidth: .infinity)
                        }

Try this: The code in the init makes the background of TableView transparent. Test the effect of ignoresSafeAre() leave it and put it there.

init() {
      UITableView.appearance().backgroundColor = .clear
      UITableViewCell.appearance().backgroundColor = .clear
  }
  var body: some View {
      NavigationView {
          ZStack {
              Color.red // use Image here

              //Your Code here
          }.ignoresSafeArea()
      }
  }

@Hatsushira - using your above code makes the image appear in the HStack area at the top, but not in any other area of either the VStack or the List , thanks, below is full code with changes you suggested, the init is there ....

 struct HomeView: View {
    init() {
          UITableView.appearance().backgroundColor = .clear
          UITableViewCell.appearance().backgroundColor = .clear
      }
    var body: some View {

        NavigationView {
            ZStack {
                Image("cover")
                    .resizable()
                VStack {

                        HStack {

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                Image("Demo")
                                    .resizable()
                                    .frame(width: 150)
                            }

                            Spacer()
                            NavigationLink {
                                Text("Demo")
                            } label: {
                                Image("Demo")
                                    .resizable()
                                    .frame(width: 150)
                            }
                        }
                        .padding()
                        .frame(height: 150)

                        List {
                            NavigationLink {
                                Text("Demo")
                            } label: {

                                customText(image: "Demo", str: "Demo")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                customText(image: "Demo", str: "Educational Series")
                                    .frame(maxWidth: .infinity)
                            }

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                customText(image: "Demo", str: "Demo")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Collection")
                            } label: {
                                customText(image: "collection", str: "Collection")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Artist")
                            } label: {
                                customText(image: "artists", str: "Artists")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                customText(image: "joinus", str: "Join Us")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("About Us")
                            } label: {
                                customText(image: "aboutus", str: "About Us")
                                    .frame(maxWidth: .infinity)

                            }
                        }

                    }

            }.ignoresSafeArea()

        }

    }

    func customText(image: String, str: String) ->  some View {
        Group {
            VStack {
                RoundedRectangle(cornerRadius: 20)
                    .fill(.blue)
                    .padding()
                    .frame(width: 300, height: 150)
                    .overlay(Image(image)
                        .resizable()
                        .frame(width: 300, height: 150))
                Text(str)
                    .scaledFont(name: "Gothic", size: 20)

                    .padding()
                    .background(RoundedRectangle(cornerRadius: 20, style: .continuous).fill(Color.gray))
            }

        }

    }

}

Does this help? https://www.hackingwithswift.com/quick-start/swiftui/how-to-use-images-and-other-views-as-a-backgrounds Searched for it here on the site.

@Hatsushira - thanks, i will try those options out(though i did try the background one), i think i am having quiet a few layers of Views , which are preventing this ... thanks again

No sure exactly what you are after from your description, however for something to appear on top of another view (as suggested by your use of the phrase overlay) it needs to be after the view elements that it overlays. The order in the ZStack matters, earlier elements are overlaid by later ones.

NavigationView {
    ZStack {
        VStack {
            HStack {

                NavigationLink {
                    Text("Gandharva Institute for social cause")
                } label: {
                    Image("gandharvaicon")
                        .resizable()
                        .frame(width: 150)
                }

 // more code here …

                NavigationLink {
                    Text("About Us")
                } label: {
                    customText(image: "aboutus", str: "About Us")
                        .frame(maxWidth: .infinity)
                }
            }
        }

        Image("cover")
            .resizable()
            .opacity(0.5)

        // added the code below for an example 
        Image(systemName: "face.smiling")
            .resizable()
            .frame(width: 250, height: 250)
            .foregroundColor(.orange)
            .opacity(0.3)
    }
    .ignoresSafeArea()
}

@Greenamberred @Hatsushira - I have been able to pin point the source of problem, its the List, in the below code, as long as i do not add any navigationlink or button in the List View , i can see the background and Hstack Images, all works well, the moment i add items to list view, background below the HStack turns white and no matter what modifier or Stacking i try it just does not show up, what can i do to over come this ... thanks

struct HomeView: View {

    var body: some View {
        NavigationView {
            ZStack {
                Image("cover")
                    .resizable()
                VStack {
                    HStack {

                        NavigationLink {
                            Text("Demo")
                        } label: {
                            Image("demo")
                                .resizable()
                                .frame(width: 150)
                        }

                        Spacer()
                        NavigationLink {
                            Text("demo")
                        } label: {
                            Image("demo")
                                .resizable()
                                .frame(width: 150)
                        }

                    }
                    .padding()
                    .frame(height: 150)

                    List {
                       // Any items added and the background disappears
                    }

                }

            }
        }

    }
    func customText(image: String, str: String) ->  some View {
        Group {
            VStack {
                RoundedRectangle(cornerRadius: 20)
                    .fill(.blue)
                    .padding()
                    .frame(width: 300, height: 150)
                    .overlay(Image(image)
                        .resizable()
                        .frame(width: 300, height: 150))
                Text(str)
                    .scaledFont(name: "Gothic", size: 20)

                    .padding()
                    .background(RoundedRectangle(cornerRadius: 20, style: .continuous).fill(Color.gray))
            }
        }
    }

}

Solved - i replaced the List with this code structure -

 ScrollView {
                    VStack {
                        NavigationLink {