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: https://codepen.io/ecccs/full/QWNBMPJ
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: https://codepen.io/ecccs/full/ExKRary
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.