在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中某个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方向的偏移量。当图片大于背景区域时,只显示图片左上角。 当图片和背景区域大小一样大时,显示整张图片。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 背景图像
如果不设置其中的某个值,也不会出问题,通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
代码:
效果: