Background won't cover whole page

Question

    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

you need to set .ignoresSafeArea() for the most parent view – Noor Ahmed Natali Jan 31 '23 at 12:30 — Noor Ahmed Natali, Jan 31 '23 at 12:30

score 0 · Answer 1 · answered Jan 31 '23 at 18:43

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))

score 0 · Answer 2 · answered Jan 31 '23 at 21:20

Try this:

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

Background won't cover whole page

2 Answers2