You can carefully study some of Apple's pages. Some of its pages use background images and are adaptive - of course, its layout is relatively simple. Its principle is CSS3 Media Query.

I usually use 2 solutions:

• 12 column grid layout system (width, float, sequential response);

• Media Query adaptation (use position attribute or flex layout, font size, adapted flow-saving image);

If it is component development, you can still use props to define inline parameters, and then the component will internally determine the layout style (several layouts are preset);

For background images, you can use the background-size or background-position: center center attributes to achieve adaptive display (automatic filling) of images, or you can use Media Query to specify different displays on different devices (such as: Desktop pictures are wider than tall, mobile vertical screen pictures are taller than wide) pictures (to save traffic).

I think: Try not to use the background as part of the content layout, unless the designer provides you with enough image-adaptive sizes and plans!

background-position, used in conjunction with background-size, have you tried it

Try background-size: cover;