I am trying to create a website with the attached background. However I am having some issues with the paper tears. I was originally creating a main container div for each section. However I couldn't get it to look right.

Tried making the background one jpg but that didn't seem to work very nicely. Is there a clever way to make this work? I was thinking maybe I could use CSS grid with overlapping rows so it is responsive?

With the parts of the background that are square I can just have the two divs touching each other and that is fine. Just can't figure out the paper tear...

I am not really sure to be honest. Any help would be appreciated!