Cut Out Collage: How to? - CSS, Responsiveness, SVG

Ok Campers: a tricky one…

EDIT: I changed the title into one that describes better my problem

I am trying to set an scene with several overlapping images placed according to a background image.

However the background image will be moved to the right for mobile viewports. The overlapping images should move accordingly.

Here an example of my current progress:

To better understand my idea you can open the pen above with developer tools to see how they are NOT positioned correctly in simulated mobile views.

To see what it is happening to the background image you can do the same with the following pen:

The solution for that pen was already discussed here.

I would eventually apply some animations to each of the overlapping images. In all cases, the CHAIR in the background image is central. It also should be congruent - it is a party in a living room, so dimensions and positions are relevant.

Any further ideas, hints, opinions, etc about this are more than welcome!

I am now wondering whether setting the scene in canvas or svg would not be a better option., What do you think?

EDIT: I have found at least one tutorial using Grid. I might still need some insides from other campers. I will also share my findings with you alongside the project.

For those interested in the topic I am working on, you can check this nice tutorial for a possible solution:

The author is so willing to help us newbies that she made a step-by-step reconstruction of the tutorial in Codepen. And she has other tutorials for us!! Check her!

For those who share same interest about solutions for this particular problem:

  1. Today I came across with the idea that a good way to see the problem is by creating a fixed grid that would allow me to compare different views. I didn’t find any transparent grid so I tried to find a CSS solution using… GRID. Here is what I found:, and here is how it looks like:

See you around, Campers!