title: SwiftUI: Prevent Image() from expanding view rect outside of screen bounds
body: <h3>What I'm trying to achieve</h3>
  
  <p>I'm trying to create a SwiftUI view where an image should expand the entire screen (<code>edgesIgnoringSafeArea(.all)</code>), and then overlay a view on top of that, that also fills the entire screen, but respects the safe area.</p>
  
  <h3>What I've tried</h3>
  
  <p>This is my code, which comes close:</p>
  
  <pre><code>struct Overlay: View {
    var body: some View {
      VStack {
        HStack {
          EmptyView()
          Spacer()
          Text("My top/right aligned view.")
            .padding()
            .background(Color.red)
        }
        Spacer()
        HStack {
          Text("My bottom view")
            .padding()
            .background(Color.pink)
        }
      }
    }
  }
  
  struct Overlay_Previews: PreviewProvider {
    static var previews: some View {
      ZStack {
        Image(uiImage: UIImage(named: "background")!)
          .resizable()
          .edgesIgnoringSafeArea(.all)
          .aspectRatio(contentMode: .fill)
        Overlay()
      }
    }
  }
  </code></pre>
  
  <h3>The issue and tested solutions</h3>
  
  <p>The issue is that the image is not clipped it looks like, so it expands the parent view to a width larger than the screen width, which then makes the top right aligned red text box float off screen (see image).</p>
  
  <p><a href="https://i.stack.imgur.com/yVlhM.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/yVlhM.jpg" alt="enter image description here"></a></p>
  
  <p>I tried using <code>.clipped()</code> in various places, with no luck. I would preferably avoid using <code>GeometryReader</code> if possible.</p>
  
  <h3>Q: How can I make the image view only fill the screen?</h3>