怎么让背景图片铺满整个页面

cdgogo

于 2020-01-20 14:40:57 发布

阅读量1.3w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_36699230/article/details/104051318

CSS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了两种方法实现背景图片铺满整个页面：一是通过CSS的background属性设置；二是利用图片绝对定位来达到全屏效果。同时提醒注意body的background属性可能带来的遮盖问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一、background背景图片设置

html,
body {
	width: 100%;
	height: 100%;
	background: url(../images/bg.png) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/
}

方法二、图片绝对定位实现

<body>
    <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
        <img src="images/bg.png" height="100%" width="100%" />
    </div>
</body>