如何在div中插入一张背景图片？

1、在div里面书写了一些文字，然后想要在放入一张图片。

2、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。

3、然后通过background给div添加一张图片作为它的背景。

4、通过url()来连接图片，url里面放置的就是背景图片的路径。

5、放一张图片用作背景，注意，路径要写对。

6、保存之后文字就会覆盖在图片的上面了，而如果使用img标签，则没有这种效果。

css使div背景图片填充的具体 *** 作步骤如下：

1、我们首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。

3、设置背景图片，创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

div是html中的基础元素之一，运用div的时候，为了美观经常会给它添加背景图片。下面我就给大家分享一下如何给div添加背景图片。

工具/材料

Sublime Text

01

首先我们打开sublime text软件，新建一个html页面，然后在在页面中添加html的基本结构，如下图所示

02

然后我们在html的body区域添加一个div，并且给div设置一下宽高以及边框的样式，如下图所示

03

运行程序以后，你就会看到如下图所示的div区域，我们接下来就要给这个区域添加背景图片

04

然后我们回到html文档，在div的样式规则里面添加background-image属性，如下图所示，给此属性指定一个图片路径，运行以后你就会看到背景图片了

---