Background won't cover whole page-CodePudding

    ScrollView {
        ZStack{
            NavigationView(){
                List {...}
                .toolbar {...}                    }
                .sheet(isPresented: $showingProfile) {...}
                .sheet(isPresented: $showingVoortgang) {...} 
            }
        }
    }
    .background(Image("Background3")
        .resizable()
        .ignoresSafeArea()
        .opacity(1))

// I have a NavigationView in a Stack in a ScrollView. I made the background of the scrollView my picture but it wouldn't render the whole page, only the background of the back page and not the NavigationView

CodePudding user response：

If I understand correctly, your issue is that content inside NavigationView does not have the background image you applied to scroll view.

One way to do this is to use blendMode() on NavigationView, try it with .darken, .overlay, .plusDarker or other modes to see which one you like better.

Example in your code:

ScrollView {
    ZStack{
        NavigationView(){
            List {...}
            .toolbar {...}                    }
            .sheet(isPresented: $showingProfile) {...}
            .sheet(isPresented: $showingVoortgang) {...} 
        }
        .blendMode(.plusDarker) // <--
    }
}
.background(Image("Background3")
    .resizable()
    .ignoresSafeArea()
    .opacity(1))

CodePudding user response：

Try this:

 ScrollView {
    ZStack{
        NavigationView(){
            List {...}
            .toolbar {...}                    }
            .sheet(isPresented: $showingProfile) {...}
            .sheet(isPresented: $showingVoortgang) {...} 
        }
    }
    .background(Image("Background3")
    .resizable()
    .edgesIgnoringSafeArea(.all)
}