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?
为情所困
为情所困 2017-05-16 13:25:30
0
4
1088

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!

为情所困
为情所困

reply all(4)
小葫芦

background-size:100% auto;

过去多啦不再A梦

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%;}
巴扎黑

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

给我你的怀抱

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;
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template