css背景图片居中:css实现背景图片水平垂直居中

发布时间:2020-09-19编辑:脚本学堂
有关css实现body背景图片居中的方法,在网页中实现图片水平垂直居中效果,纯css让背景图片居中写法,几个css让背景图片水平(垂直)居中 的例子。

一、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也就是顶部显示背景图。