How do I add a picture from the internet as a background for my app?

Question

I want a picture from the internet that I have downloaded to be a background for a specific part of my homepage that I am working on.

This is my homepage code:

struct LaunchPage: View {
    var body: some View {
        NavigationStack{
            GeometryReader {geo in
                VStack{
                    ScrollView{
                    ZStack {
                        Color.clear
                            .background(.ultraThinMaterial)
                        NavigationLink("Groups", destination: GroupPage())
                            .font(.title.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 20)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                       
                        NavigationLink("Calendar", destination: CalendarPage())
                            .font(.title.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 140)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                        
                        NavigationLink("Join", destination: JoinPage())
                            .font(.title.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 300)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                        
                    }
                    
                    VStack {
                            Spacer()
                            Image("carpooly-high-resolution-logo")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: geo.size.width * 2.0, height: geo.size.width * 1.5)
                                .offset(y:-88)
                                .offset(x:-200)
                                .padding(.top, 100)
                    }
                    }.background(backgroundGradient)
                }
            }
            .navigationBarHidden(true)
        }
    }
}

I already have backgrounds set for the navbar area but I want one for the middle of the screen. This is currently how the launchpage looks:

The white space with the Carpooly logo is where I want the background to be.

I have not really tried anything and I have searched the web and couldn't find anything. Thank you in advance for any help!

Answer 1

To have an image as the background to your logo image, you could try this approach, using a simple ZStack with the image you have from the internet.

Example code:

 VStack {
     Spacer()
     ZStack {  // <--- here
         
         Image("internet_image")  // <--- here image from internet
             .resizable()
             .aspectRatio(contentMode: .fit) // adjust as required
             //...
         
         Image("carpooly-high-resolution-logo")
             .resizable()
             .aspectRatio(contentMode: .fit)
              //...

     } // end ZStack
 } // end VStack