How do you make the background image clearer when you are building a mobile web page?

I found a problem. if I want a region, for example, if the width and height are PX, and the background image is exactly PX, the display on the mobile phone will be blurred, while Android and Apple will be blurred, only when my background image exceeds 200px, for example, 300px, and then the background-size: contain method is used... I found a problem. if I want a region, for example, if the width and height are PX, and the background image is exactly PX, the display on the mobile phone will be blurred, while Android and Apple will be blurred, the background image is clear only when my background image is over 200px, for example, 300px and then uses the background-size: contain method. why?

Reply content:

I found a problem. if I want a region, for example, if the width and height are PX, and the background image is exactly PX, the display on the mobile phone will be blurred, while Android and Apple will be blurred, the background image is clear only when my background image is over 200px, for example, 300px and then uses the background-size: contain method. why?

We recommend that you read this article:
Http://www.w3cplus.com/css/towards-retina-web.html
Simply put, a screen pixel will display 4 css pixels, such as the iPhone 5S, device-pixel-ratio is 2, the screen width is 320px, but the display page is 640px, therefore, to display a px wide image, the image must be made 640px wide to be clear.

It may be because the mobile phone is a high-definition screen, and the actual pixel is 2X

Go online and check the webpage's adaptation to the retina screen