方法一：img标签设置

body类的样式：去除默认外边距和内外距为0；

body中写img标签：图片设置宽高都为100%，位置为absolute；

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body {
				padding: 0;
				margin: 0;
			}
			
			img {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<img src="img/bottom.jpg">
	</body>

</html>

方法二：background-size:cover;属性指定背景图片大小

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style>
			body {
				/*加载背景图：图片地址 不平铺 */
				background: url(img/l.png) no-repeat center center;
				/* 让背景图基于容器大小伸缩 */
				background-size: cover;
				/* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
					scroll 背景图片随着页面的滚动而滚动，这是默认的。
 					fixed 背景图片不会随着页面的滚动而滚动。
  					local 背景图片会随着元素内容的滚动而滚动。*/
				background-attachment: fixed;
			}
		</style>
	</head>

	<body>

	</body>

</html>

 方法三：background-size：100% 100%；与background-attachment:fixed;设置

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style>
			body {
				/*加载背景图：图片地址 不平铺 */
				background: url(img/l.png) no-repeat;
				/* 让背景图基于容器大小伸缩 */
				background-size: 100% 100%;
				background-attachment: fixed;
			}
		</style>
	</head>

	<body>

	</body>

</html>

 效果展示：

更多推荐

html让背景图片自适应填充整个页面