HTML中怎么插入图片作为背景？_随笔

visual studio简称为vs。下面，我们来看看HTML中怎么插入图片作为背景图片吧。

打开vs

打开visual studio软件，并新建一个文件夹为img，把图片粘贴到文件夹中，如下图所示：

设置背景图片的代码为 style=" background:url(img/img01.jpg)"，如下图所示：

在浏览器中查看

右击【HTMLPage.htm】，选择【在浏览器中查看】，如下图所示：

预览效果

在浏览器中的预览效果如下图所示：

在CSS样式中设置backgroud-image属性，代码如下：

<styletype="text/css">

body{

background-image:url(你的图片地址)

background-position:center

background-repeat:repeat-y；

}

</style>

说明：

1、background-image:url(你的图片地址)：指这张背景图存放的路径；

2、background-position：指这张背景图的位置。left（左）、right（右）、top（上）、bottom（下）可以取值，你要求图片居中，所以是“center”；

background-repeat：指图片平铺方式；一般都默认平铺，设置为no-repeat则是不平铺。你要求“y坐标平铺”所以是“repeat-y”。

html中设置元素的背景色都是通过CSS中的background 属性来完成。

例如，给整个页面（body）设置背景色：body{background: #ddd}；如果要将图片作为背景色：body{background-image: url(1.jpg)}，其中url括号后面的是背景图片的链接。

拓展资料：

background 简写属性在一个声明中设置所有的背景属性。

background可以设置如下属性：

background-color 背景颜色

background-position 背景图像的位置

background-size 背景图片的尺寸

background-repeat 重复背景图像

background-origin 背景图片的定位区域

background-clip 背景的绘制区域

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background-image 背景图像

如果不设置其中的某个值，也不会出问题，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

代码：

效果：

欢迎分享，转载请注明来源：内存溢出

HTML中怎么插入图片作为背景？