html5 - 在body中没有元素把高度撑开的情况下，怎么设置背景图铺满全屏？

Question

html,body{
    background:url(../img/bg.jpg) center center no-repeat;    
}


经测试其他5.5寸以下的手机屏都能完整显示背景图
5.5的不行，页面底部会有30px的留白？

Answer 1

html,body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-size: cover;
}

Answer 2

background-size:cover;

Answer 3

/*新增加此条样式*/
html,body{
    width:100%;
    height:100%;
}

Answer 4

background-size：cover
background-position：center

Answer 5

background-size:cover;

The image itself is not wide and high enough. Using this parameter can make the image fill the screen, but the background will overflow the window

Answer 6

When I was making a WEBAPP cover a long time ago, I thought @media all and (min-device-pixel-ratio: 16/9) {...} was good, but in the end I didn’t have the chance to use it. You can use multiple pictures and aspect ratios. It's just 16:9, 4:3, or the perverted Meizu 15:9, but I haven't tried it, sir. . .

Answer 7

background-size:cover;

Answer 8

width:100%; height:100%;

Just expand the height and width

Answer 9

It is recommended to learn about the background-size attribute, https://segmentfault.com/a/11..., this is my explanation of this attribute, you can take a look, haha