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

html-css013

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

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方法是要求图片不重复,但又得占满浏览器所采用的方法。

首先~还是给body设置背景~

然后再body里面加一个层~~

把这个层定义成你想要的“body”的大小

-

-

~其实页面你能看到的地方。都是在body里的。。

----------------------------

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=utf-8"

/>

<title>无标题文档</title>

<style>

*{margin:0

auto

padding:0

auto}

body

{

background-color:#000}

#container

{

width:800px

height:600pxbackground-color:#FFF}

/*这里高度是不用设的,只是DIV里面没内容,我就设了下高度,好看效果哈*/

</style>

</head>

<body>

<div

id="container">

</div>

</body>

</html>