在html中插入整个页面的背景图

01

先做一个简单的HTML页面，页面里只有一个div和一段文字。

02

要添加整个页面的背景图片，我们就只能把背景加到body标签里了，所以我们在body里添加一个样式，叫‘bg’

03

然后定义这个bg的样式规则，主要就是添加background-image样式，就是添加背景图。

background-repeat是让背景图铺满整个页面。

04

看下页面的效果，可以看到现在整个页面都铺满了蝴蝶这张图片了。为了更好的效果，大家可以更换一张更好看的背景图。

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

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

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

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

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

在html中某个div里加入背景图片的话，主要有以下几种方式：

第一种： 在css文件里加入背景图片：在css里用url(../images/背景图2.jpg)，在内联css和引入css中会由于html文件和css文件所处的相对位置不同，引入图片路径会有所不同。

如图：

第二种：在html中引入：<div class="detail" style="background-image: url(../images/背景图1.jpg)"></div>，同理url()括号里是图片的引入路径。

如图：

第三种：在div中加一张图片

<div class="detail" >                  

<img src="../images/背景图1.jpg" alt="" style="width:100%height:100%">

</div>

如图：

当图片小于背景区域大小时，图片会不断重复显示，如果不想图片重复显示，可以设置background-repeat，background-repeat有4个值，分别是repeat（代表重复显示）、no（代表不重复）、repeat-x（代表水平方向上重复）、repeat-y（代表垂直方向上重复）

当图片小于背景区域大小时，默认从左上角开始铺，如果想从任意位置开始铺，可以使用background-position属性，设置在x、y方向的偏移量。

当图片大于背景区域时，只显示图片左上角。

当图片和背景区域大小一样大时，显示整张图片。

---