步骤一、首先打开需要修改的HTML文件。
步骤二、然后始化样式,将代码添加在<style></style>标签内。
步骤三、添加一个div容器,然后命名为bg-box
步骤四、背景全屏需要容器全屏,将bg-box的样式补全。
步骤五、设置完毕,图片背景以及全屏了。
1、在body设置 <body background="背景图.jpg">,但是图片是平铺。2、因为background属性不能拉伸图片,只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img>,其中z-index:-1为了让该div在最下层,也就是背景。
示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>背景全屏</title>
<style type="text/css">
body{
margin:0px
padding:0px
}
.d1{
position:absolute
left:0px
top:0px
width:100%
height:100%
z-index:-1
}
</style>
<body>
<div class="d1"><img src="背景图.jpg" width="100%" height="100%"/></div>
<center>
<h1>这是全屏图片</h1>
<h1>这是全屏图片</h1>
<h1>这是全屏图片</h1>
<h1>这是全屏图片</h1></center>
</body>
</html>
Background : 背景色Background Image :选取你的背景图Reapeat : 背景图是否重复,其中选no-repeat为不重复,repeat为重复,repeat-x和repeat-y分别为只在X和Y方向重复。Attachment : 背景图位置,fix为背景图位置固定不变,scroll为背景图随页面一同滚动Horizontal : 为固定背景图时图在水平方向所居的位置,可以选择居中,居左,居右或自己设定距左的距离。Vertical : 为固定背景图时图在竖直方向所居的位置,可以选择居中,居顶部,居底部或自己设定距顶的距离。注意带 * 的选项要在浏览器里才能看到效果。设定完毕,对Dreamweaver左下角点选<body应用该CSS样式就行了不光是<body标签,页面里有的元素都可以在那里选择,可以很方便的选取应用对象。对于所有onload 的触发事件,也都可以选<body再加Behavior,比如drag layer或打开页面后弹出窗口等等background-attachment属性控制背景图象是否随内容一起滚动,取值为scroll和fixed。默认值为scroll(滚动);fixed为静止。