针对页面背景图片我整理了几种方法仅供参考
在前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面，我在之前的前端学习中也逐渐了解到一些方法和问题的解决方式，在下面我为大家的整理好了，仅供参考学习。
一、DIV中添加背景图片
代码如下（示例）：
<head>
<meta charset="UTF-8">
<title>图片背景铺满</title>
<style>
div {
/*图片地址 不重复 水平位置居中 垂直位置居中*/
background: url("1.png") no-repeat center center;
height: 100%;
width: 100%;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size:cover;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div></div>
</body>
二、img中设置背景图片
代码如下（示例）：
<head>
<meta charset="UTF-8">
<title>图片背景铺满</title>
<style>
img {
width: 100%;
height: 100%;
/*元素的位置相对于浏览器窗口是固定位置*/
position:fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<img src="1.png" alt="">
</body>
三、Body中设置背景图片
代码如下（示例）：
<head>
<meta charset="UTF-8">
<title>图片背景铺满</title>
<style>
body {
background:url(1.png) no-repeat;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
background-size:cover;
}
</style>
</head>
<body>
</body>
结语
以上就是html+css将背景图片铺满的几种常用方法，这些方法可以满足大多数前端学习的日常使用需求，效果图我就不放出来了，大家把图片的路径改成自己的就可以使用。更多相关HTML CSS背景图片铺满内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
