How to make up such backgrounds for sections?

Question

css

Hello!
Question one: -

often there are layouts in which part of the background of one screen "goes" to another. How to implement it correctly?
For myself, I found the solution only in wrapping these sections in one wrapper exclusively for setting the background. But it's okay if there are two such sections with a "common" background. What if the entire layout of the background part of one block overlaps with the next block?
wrap everything in a common wrapper and give it multiple backgrounds? Particular pain begins with adaptive, or rather rubber - use a bunch of media queries to constantly adjust bg-size \ bg-position for normal display when resizing ... Plus, if content is added / changed in different sections, then the parent-wrapper will be resize, respectively, backgrounds can behave unpredictably and "ride" somewhere.

For example two cases:

number of times

and number two

in 1 case, three different sections have a partially common background. Plus, text elements are tied to the background - it is white, and if the background moves, then the text will be invisible.

In case 2, it is not so critical in terms of linking content to the background, but, all the same, obviously different sections have common background elements.

What are the best practices for such cases? Or do not do it with a background at all, but with pictures with positioning?

Question two:

here is the element

- do not bathe and just cut out as a png image?
-or mess with svg with clip-path or mask-image so that you can change the background of this shape?

How is it correct? All the same, this is a background element, not a content image. On the other hand, what if the site owner wants to put some daisies under the same mask...

Thank you all in advance for your answers!

Answer 1

In a block with text (relative), make a block with position: absolute and do whatever you want with this block. Background in svg, or at least in png