如何把HTML文件的背景图片设成全屏?

html-css016

如何把HTML文件的背景图片设成全屏?,第1张

步骤一、首先打开需要修改的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>

如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用<body 

style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。

这时可以拐个弯,设置两层div,底层div当做背景使用,放置一张图片即可。

<div id="background" style="position:absolutez-index:-1width:100%height:100%top:0pxleft:0px"><img src="1.jpg" width="100%" height="100%"/></div>

网页背景图片默认情况下是重复平铺满整个页面。上面1方法是要求图片不重复,但又得占满浏览器所采用的方法。