HStack removes images from Zstack

Question

Im trying to add images in a Stack as part of a background for a preloader screen, but it looks like the Hstack is removing the other image from the foreground. Im not quite sure whats causing the issue. I would like to have the Hstack behind the image(currentImage)

                    currentColor.ignoresSafeArea(.all)
                    .ignoresSafeArea(.all)
                    
                    HStack{
                        ForEach(1..<3000) {_ in
                                Image(backgroundHat)
                                .resizable()
                                .frame(width: 40, height: 40)
                                .onAppear{
                                    number = UIScreen.screenHeight
                                    self.animationScale = true
                                }
                                .position(x: 50, y:(Double.random(in: -1...number)))
                                .animation(.easeInOut(duration: 7), value: number)
                            Spacer()
                            Spacer()
                            Spacer()
                            Spacer()
                            }
                    }
                    
                        Image(currentImage)
                            .resizable()
                            .scaledToFit()
                            .frame(width:300,height:300)
                            .position(x: UIScreen.main.bounds.width / 2 , y: UIScreen.main.bounds.height / 2.6 )
                    
                    
                    if showProgress {
                        Image(textImage)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width:200,height:200)
                            .clipShape(Circle())
                            .frame(minWidth:300,minHeight:300)
                            .rotationEffect(Angle(degrees: self.isAnimating ? 360 : 0), anchor: .center)
                            .animation(self.isAnimating ? foreverAnimation : .default)
                            .position(x: UIScreen.main.bounds.width / 2 , y: UIScreen.main.bounds.height / 1.55 )
                            .onAppear { self.isAnimating = true }
                    } else {
                        Image(textImage)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width:300,height:300)
                    }
                    
                    
                }
                .onAppear {
                    self.showProgress = true
                    
                    DispatchQueue.main.asyncAfter(deadline: .now()+6.0){
                        withAnimation{
                            self.currentColor = Color("Yellow")
                            self.currentImage = "DarkHat"
                            self.textImage = "DarkMoustache"
                        }
                    }
                    
                    DispatchQueue.main.asyncAfter(deadline: .now()+7.0){
                        withAnimation{
                            self.isActive = true
                        }
                    }

                }``
                

View with no HStack inside

View with Hstack inside

Answer 1

move .position(x:...,y:...) before the frame, and adjust according to your needs, and screen sizes:

 Image(currentImage)
     .resizable()
     .scaledToFit()
     .position(x: UIScreen.main.bounds.width / 2 , y: UIScreen.main.bounds.height / 2.6 )
     .frame(width:300,height:300)