Clipping Mask using SVGs with Cover fit

Hey, I’m trying to make a responsive clipping mask on my home page.

Basically what is currently there is a static png, whereas I’m sure I can make this work in a way whereby there are 4 windows with a single image behind that then has a level of scroll/zoom with it.

I can create whatever shape SVG etc I need, whether that is a single SVG with four windows, or four separate SVGs, I just don’t know how to implement this correctly, and then further to this, I don’t know how to give this the same ‘Cover’ fit that helps it resize with view width/view height where required

Here is my site Read-Only: LINK