There is a block with a background image with a complex structure, there are geometric shapes on it, I need to make other text in these "figures". I did the following: I set the position:relative and background-size:cover (with a picture resolution of 1200 * 900) to the block with the background, and absolute positioning for the blocks with texts, but in percent. But when resizing the browser window enter image description here everything starts to move out. How can such a design be made adaptive? The picture shows an approximate scheme of what you need (blocks with absolute positioning are shown in red)

  • eight
    I think it's worth it to publish your html and css that you wrote, so that you can look at the behavior, see the code, and also, perhaps, suggest changes to it without reinventing the wheel - Alexey Shimansky
  • one
    You can offer to make several background images and enclose the desired at a certain screen resolution - Ordman

1 answer 1

The fact is that positioning as a percentage is not enough. As I understand it, you put the right: 50% . True, in this case, the block will move by 50%, but 50% from the edge of the block. Perhaps at a high resolution you do not see that the alignment works crookedly, but on a small one it becomes obvious. To solve your problem, you also need to set margin-right: -100px apart from right: 50%. Where 100px is half the block width.