让div中的背景图居中显示

最新推荐文章于 2022-04-26 15:15:11 发布

_Slience_

最新推荐文章于 2022-04-26 15:15:11 发布

阅读量3.5w

点赞数 1

分类专栏： Web前端

Web前端专栏收录该内容

94 篇文章 1 订阅

订阅专栏

我们平时加背景图是这样的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#header {
				width: 100%;
				height: 400px;
				border: 1px solid;
				background: url("http://www.baidu.com/img/baidu_jgylogo3.gif") no-repeat;
			}
		</style>	
	</head>
	<body>
		<div id="header">
			
		</div>
	</body>
</html>

效果是这样的

如果我想要让背景图居中应该如何做呢？

在css中的background加上两个center即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#header {
				width: 100%;
				height: 400px;
				border: 1px solid;
				background: url("http://www.baidu.com/img/baidu_jgylogo3.gif") no-repeat center center;
			}
		</style>	
	</head>
	<body>
		<div id="header">
			
		</div>
	</body>
</html>

效果是这样的

如果想要居中靠上对齐就top center，如果靠左居中就left center，其他的以此类推，实测left在前还是再后木有影响