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

用Dreamweaver做的

1、最简单方法使用css3.0新增的一个属性background-size,代码如图。IE8以下不支持。

2、打开浏览器查看效果如下:

3、使用css代码如图。支持IE9+,IE 7/8: 平铺效果支持,但是在小于1024px的屏幕下居中效果失效。

4、然后打开浏览器效果如图所示。

5、之后使用jQuery模拟的方法。css代码如图。

6、然后jquery部分代码如图所示。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2020-04-20

步骤一、首先打开需要修改的HTML文件。

步骤二、然后始化样式,将代码添加在<style></style>标签内。

步骤三、添加一个div容器,然后命名为bg-box

步骤四、背景全屏需要容器全屏,将bg-box的样式补全。

步骤五、设置完毕,图片背景以及全屏了。

本回答被网友采纳
第2个回答  推荐于2017-10-12

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/html; charset=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>

第3个回答  2013-10-12
全屏代码<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-image: url(图片路径);
}
-->
</style></head>

<body>
aa</body>
</html>本回答被网友采纳
第4个回答  2013-10-12
在背景图片中加上属性 重复 就行了
相似回答