div背景图片（div背景图片居中）

本文目录一览：

• 1、div怎么设置背景图片
• 2、设置div背景图片（急急急
• 3、html中在div中加背景图片
• 4、div 代码 如何设置 DIV 背景图片

div怎么设置背景图片

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

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

设置div背景图片（急急急

这样设置div背景图片的写法是错误的，正确的写法应该是这样

css内嵌式写法：div{ background:url（'图片的路径'） }

css行内样式写法： style=“background:url('图片的路径')”

下面举例说明

步骤1：新建一个html页面，修改里面的代码，添加1个div标签，id为div1,同时准备2张图片作为背景图分别叫“01.jpg”和“02.jpg”，此时div1未设置背景图，在浏览器中显示为

步骤2：div1采用css内嵌式写法设置背景图片，代码及浏览器中显示的效果为

步骤3：div1换用css行内样式写法设置背景图片，代码及浏览器中显示的效果为

html中在div中加背景图片

html在div加背景图片的具体操作步骤如下：

1、新建一个html文档，编写一个类名等于setbg的div标签。

2、div写上样式，“background: url(bg_main.jpg)；”的样式，设置背景图即可。

3、设置了背景图，给div设置高度“height：500px”。

4、设置高度之后，高度和背景图就可以出现。

5、div很多文字，超过了固定高度，会出现背景不会平铺到底部。

6、在设置好的背景后面加个 “repeat”，就可以平铺背景图。

。

div 代码 如何设置 DIV 背景图片

关于如何设置 DIV 背景图片，如下例子：如果是背景图片重复就把no-repeat改为repeat

div{background:url(images/1.jpg) no-repeat;}