Responsive Movie Backgrounds

This is an explanatory animation I created for my portfolio to describe what I had done in a freelance project of mine.

I wanted the Key imagery from the project sections on the homepage to always be visible to the user. So instead of just using a single background image, that might cut off parts of our heroes, I created a multi-layered set of images behind the content.
‍
I extracted Mowgli, Bagheera and the rock they stand on in the poster above into its own layer. Then using the clone/spot healing tools in photoshop I extended the background image behind to imagine what was behind them.
‍
In the code the foreground image is set to always ‘contain’ and the background image is set to ‘cover’, meaning we never lose sight of Mowgli and Bagheera at any resolution and the background image behind them fits to cover all resolutions too. Then on top of that I added the faded background colour and copy.