[SOLVED] Astroid Background Image

A background image in a section always has a fixed size. If you want to adapt different image sizes to different display sizes, this is only possible if you create a separate section for each screen size and then assign this section to the respective screen size. The images must then be adjusted accordingly in width and height. Therefore, use a suitable image for each display size (width x height). However, the section must also be hidden for the other screen sizes.

 

Thanks. I've already tried that. I've set different image sizes. But with a 600-pixel image, for example, only the center part is displayed. The image is greatly enlarged, but not scaled to the screen width.
What can I do?

You can convert the ratio here, it might help.
www.digitalrebellion.com/webapps/aspectcalc

You need to crop the images in proportion to the display size.

>You need to crop the images in proportion to the display size.

Thanks.

I've tested different sizes. I've also tried maintaining the same proportions.
Ultimately, however, you don't know what the mobile device's proportions are. There are several options for this.
Ultimately, the image isn't scaled. It stays the same size, and only a section is displayed.

This is precisely why background images are rarely used on smaller displays. Images containing centered elements are difficult to position. Such background images should generally be avoided on smaller displays, such as mobile devices.

BTW: A background image on Apple devices (iPhone and iPad) is not centered at all and is due to the wrc html standard which Apple does not follow.