The images on the right can be background images placed on the right of the page at a bottom background position. You can again use background-attachment:fixed to keep them at the bottom and then just let them naturally disappear when the window is closed smaller. You may need to demo this first to see the best way to handle it as it may be better to place the images at the bottom of the page rather than the viewport but both may work. Of course it will assume that you don't have any very small pages or very little of those images will show.
The other content can just be normal columns. You may be able to make them flex a little or just set them into one column at smaller screen sizes.
It won't be possible to match those background images to the content positions exactly because that will depend on content and what size the user may have their text at but you can probably get something close. You may be able to use "background-size" to stretch the images in capable browsers but results can be varied.
Usually with designs like these I run a few quick tests of the ideas I mentioned to see which works best before you get into the real detail of coding. Just knock up a basic page with those background images and see what it looks like next to a couple of columns. Don't worry about the side nav for starters as that can be worked in once you see how things look.