方法一:
背景图片全屏要点:
1.设置包裹div 高和宽为:100%
{width:100%; height:100%;}
2.设置包裹div 的 position为relative
(position:relative;)
3.设置背景图片高和宽为:100%
{width:100%; height:100%;}
4.设置背景图片position 为absolute
{position: absolute;}
5.设置背景图片z-index 为-1
{z-index:-1;}
方法二:
1.设置包裹div 的高和宽为:100%
{width:100%; height:100%;}
2.添加包裹div 的背景图片,并且从左上角开始,在x方向重复
{background:url(../img/bg_2.jpg) left top repeat-x;}
3.设置背景大小 background-size 为100%
{background-size:100% 100%;}
html代码:
<body>
<!--方法一-->
<div id="divWrapper">
<img class="bgImg" src="img/bg.jpg"/>
<div class="content"></div>
</div>
</body>
<!--方法二-->
<div id="divWrapper_2">
<div class="content"></div>
</div>
css代码:
/* 方法一*/
.bgImg{ width:100%; height:100%; position:absolute; z-index:-1;}
.content{ width:600px; height:700px; margin:0 auto; margin-bottom:20px; background-color:red;}
/* 方法二*/
#divWrapper_2{ width:100%; height:100%; background:url(../img/bg_2.jpg) left top repeat-x; background-size:100% 100%;}
.content{ width:600px; height:700px; margin:0 auto; margin-bottom:20px; background-color:red;}