html5 - How to make the background image display in full screen on the mobile phone (the content is relatively long and has scroll bars), ensuring that the image is not deformed?

Question

My mobile webpage needs a background image. How can I make the background image display in full screen without deformation?
With my current settings, the background is deformed! Ask God!

Answer 1

background-size:100% auto;

Answer 2

You can try not to set a background image, but use the img tag to display the background image.

<p class="page">
    <img class="bg"/>
    <p class="page_Con">
    </p>
</p>

.page{position:relative;height: 100%;overflow:auto;}
.bg{width:100%;height:100%;}
.page_Con{position:absolute;top:0;left:0;width:100%;height:100%;}

Answer 3

background-size: cover; you need to set width in body and HTML first

Answer 4

You want to fully display the image without stretching it. If you are really obsessed with this, please provide a reference plan for the design:
After feathering the outline of the image, add a background color, and then get the color value of the background color of the image. Set css attributes in main_bg:

background-color: white;// 拿到的图片背景色
background-image: url('链接');
background-size: 95%;  //可以写成固定值
background-repeat: no-repeat;
background-position: center;