如何把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
在背景图片中加上属性 重复 就行了

html怎么设置背景图片全屏平铺?
1、新建一个html文档。2、设置一下HTML的框架,然后把图片设置在同一个文件夹里面。3、加入<style type="text\/css"><\/style>这样可以有样式设置。4、因为背景设置在主体,所以还要定义为body{}。5、background-image:url(图片),这个是添加图片的意思。6、然后我们需要加入background-repea...

如何把HTML文件的背景图片设成全屏?
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...

html怎么让一张背景图片铺满
1、首先新建一个html文档。2、其次达到杭州机场后,设置一下HTML的框架,然后把图片设置在同一个文件夹里面。3、最后设置html和body的高度为100%,给背景添加背景图片,并设置background-size为100%即可将背景图片铺满。

html里,如果让背景图片根据屏幕大小铺满屏幕,不重复?
1、首先我们用Dreamweaver软件做一个html文档,当然用其他编辑器也可以。2、然后给body设置一个背景图片,这里小编给body加了一个高度,以便能看到图片。3、然后先在浏览器中预览一下效果。会看到图片两遍有空白,没有填充满整个屏幕。4、将background-size,可以设置其值为100%。5、需要注意的是这是cs...

在html中将插入背景图片,如何让背景图片跟屏幕一样大?
点击【新建文件夹】。如图所示:2.放入背景图片,在Dreamweaver CS6中点击【新建一个html空白文档】。如图所示:3.将页面内容放入<body><\/body>中。如图所示:4.在<body后按一下空格键,找到background,再按空格,点击【浏览】。如图所示:5.选中背景图,点击【确定】。如图所示:6.将html另存为在...

dw中用HTML如何将背景图片平铺?
1、打开Dreamweaver CS6软件后准备好空白的HTML,点击导航上的修改,点击弹出菜单里的页面属性:2、打开页面属性后选择外观分类,点击背景图像后面的浏览,选择背景图片:3、在选择图像文件对话框里,选择要设定的背景图片然后点击确定:4、设置后返回到页面属性对话框,此时可以看到背景图像那有值了,然后...

html中,怎么让背景图片充满整个页面
一、打开Dreamweaver,然后选中html,出来了一个html标准文档。二、在<body>标签里添加文件路径,语法如下:<body background="文件路径"> 这时,页面虽然充满了背景,但可以看出背景图片被填充了多次。三、在<body>里添加样式,代码如下:style=" background-repeat:no-repeat ;background-size:100% 100%...

在html中设置背景图片,怎样让它能够全屏(平铺,全部显示),而不是只显...
将背景图片的长度和宽度的值均设为100%就可以实现全屏显示.

我用html编写网页时,设置背景图片时,好像图片太大了,不能全部显示,如果...
两种方法:1、用css样式表控制图像大小 <style type="text\/css"> <!-- table { background-image: url(b61.jpg);height: 100px; width: 100px;} --> <\/style> 2、用图像处理软件(如:Photoshop)“裁切”成需要的大小。注:建议用第2种方法,图像太大影响网页打开速度。

dw中用HTML如何将背景图片平铺?
电脑、浏览器、dw编辑器。1、首先,打开dw编辑器,新建html文件,例如:index.html。2、在index.html中的<style>标签中,输入css代码:body {background: url(small.png) no-repeat;background-size:cover;} 3、浏览器运行index.html页面,此时背景图片被设置为平铺在html页面上。

相似回答