CSS positioning of blocks on the full screen image. How to do?

Question

css

How to position blocks on a full screen image.
For example: there is an image of a tree branch where the blocks should be on the leaves.
What is the best way to make grid or position: absolute;
If the second, then how to make sure that blocks do not fly off the leaves on different images?
If possible, give examples of sites with such an implementation.

Answer 1

A) you can use absolute, but:
1) All content must be in a container and have a fixed width in the range of device resolutions (for example, like container in bootstrap)
2) You will have to adjust the positions of blocks to leaves for each viewport, i.e. at least 4 times (if you have an adaptive at all)
B) I like the way when SVG is overlaid on top of the image, on which transparent blocks with id are placed, then they are attached to them through js and generate content (but the method is bad if SEO is important to you for of these blocks)
B) use a pure canvas or libraries for rendering graphics d3js, snapjs, etc (beautiful, convenient, flexible, but more difficult to implement and SEO will also suffer)