HTML全屏背景图

当我们在写前端页面的时候为了页面的美观我们通常会为页面设置图片背景,那么我们如何来设置全屏的背景图呢???

设置全屏背景图需要三个属性

			background-image: url(img/untitled.png);
			background-repeat: no-repeat;
			background-size: cover;

案例说明

设置背景图片
代码设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
			background-image: url(img/untitled.png);
			
		}
	</style>
	<body>
		
	</body>
</html>

样式欣赏(出现好多张,并不是我们想要的全屏背景图)

设置相关属性之后

代码设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
			background-image: url(img/untitled.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
	<body>
		
	</body>
</html>

样式欣赏(全屏背景图显示)

此时的显示是我们想要的效果。

了解更多关注我哟!!!

你可能感兴趣的:(H5,帮助文档)