一、css背景图片水平垂直居中
1、css样式代码:
复制代码 代码示例:
<style type="text/css">
*{margin:0; padding:0;}
html,body{ width:100%; height:100%;}
body{ background:#fff url(/eg/eg_2014_01_02_14_50.jpg) center no-repeat;}
</style>
2、html内容
复制代码 代码示例:
<div class="wrap">
<h2>让body标签中的背景图片水平垂直居中</h2>
<div class="eg">
<h3>让<body/>标签的背景图片水平垂直居中</h3>
<p>注:设置html,body{ width:100%; height:100%;}</p>
</div>
</div>
二、纯css让背景图片居中写法
代码:
复制代码 代码示例:
<title>css实现背景图片居中</title>
<body>
<style type="text/css">
<!--
BODY {background-image: URL(/201303251641192496.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</style>
</body>
三、css如何让背景图片水平(垂直)居中
在网页中让背景图片居中:包括水平居中与垂直居中,可以使用:
background:url(bg.jpg) no-repeat center center;
:no-repeat为背景图不重复,最好是满足1280宽度的分辨率下位满屏,图片可以宽度为1280像素。
第一个center为水平居中,第二个center为垂直居中,第二个center换成top也就是顶部显示背景图。