1、首先准备一张设置为背景的图片,这边准备的是一张650px*347px的图片。
2、然后建立一个html文档,将它和背景图片放到一个文件夹中。
3、编辑html文档,这边建立一个div,设置宽度为700px,高度跟背景图一样,为347px。
4、就给div设置背景图片。
5、在浏览器中预览会发现图片平铺了,这不是想要的效果。
6、然后可以给div再加上属性,-moz-background-size:100% 100%background-size:100% 100%。
7、这样设置后就会发现背景图片拉伸至100%了。
background:url(../../config/img/Title.png) no-repeat不重复background:url(../../config/img/Title.png) repeat-x横向平铺
background:url(../../config/img/Title.png) repeat-y竖着铺
什么不加就是横竖平铺
如果你是想拉伸的话,竖着切一张几个像素宽的背景图(比如说宽2px,高990px这样的一张图),然后设置repeat-x,横向平铺。这样看起来就像是一张大图。这种方法适用于纵向渐变的背景。
no-repeat: 即无论背景图片的大小, 只显示单个背景图片repeat: 指背景图片横向和纵向重复连续显示
repeat-x: 指背景图片横向重复连续显示
repeat-y 指背景图片纵向重复连续显示例: 查看本站css文件,可以看到以下代码:
body {
font: normal 12px/1.5 Georgia, sans-serif
text-align:left
background:#444 url(images/bodybg.jpg) repeat-y
}
可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加.