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

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

阿神 2017-04-17 13:44:12

[HTML讨论组]

957

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


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

阿神

闭关修行中......

全部回复(9)

巴扎黑2017-04-17 13:46:12 9楼

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

赞 +0

添加回复

迷茫2017-04-17 13:46:12 8楼

background-size:cover;

赞 +0

添加回复

高洛峰2017-04-17 13:46:12 7楼

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

赞 +0

添加回复

PHP中文网2017-04-17 13:46:12 6楼

background-size：cover
background-position：center

赞 +0

添加回复

PHPz2017-04-17 13:46:12 5楼

background-size:cover;

图片本身不够宽高，用这个参数可以使图片满屏，就是会背景溢出窗口

赞 +0

添加回复

天蓬老师2017-04-17 13:46:12 4楼

很久以前做WEBAPP封面的时候觉得@media all and (min-device-pixel-ratio: 16/9) {...} 不错，但是最终没有机会使用，可以使用多张图，长宽比无非也就16:9,4:3，或者变态魅族15:9,不过楼主，我没试过。。。

赞 +0

添加回复

迷茫2017-04-17 13:46:12 3楼

background-size:cover;

赞 +0

添加回复

PHPz2017-04-17 13:46:12 2楼

width:100%; height:100%;

高度宽度撑开即可

赞 +0

添加回复

天蓬老师2017-04-17 13:46:12 1楼

建议了解一下background-size属性，https://segmentfault.com/a/11...，这是我写的对这个属性的解释，可以看一下，哈哈

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>