background:url(image/road.jpg) no-repeat center的基本用法介绍

进行网页界面排版时，大家会经常用到background属性，写一些背景图片，颜色之类的，今天我先简单的介绍一下background属性的背景图片是什么样的效果。

首先代码是：   #ban { margin:auto; width:500px; height:500px;border:2px dotted black;background:url(../image/hover_right.png); } 在不写repeat与no-repeat的情况下，默认的是平铺。repeat平铺的效果，就是一张图，可以铺满整个屏幕。效果图如下：

然后我在#ban { margin:auto; width:500px; height:500px;border:2px dotted black; background:url(../image/hover_right.png)  no-repeat; /*不平铺*/ }no-repeat是不平铺，

效果图如下：

center这个值，大家基本上很少去用到，往往也会忽略掉这个center的利用价值。其次我再加一个属性：background:url(../image/hover_right.png) no-repeat  center;它就会居中与div的中心部分，效果图如下：

我今天做网站时，对对整个界面缩小到30%时，背景图片会向左移动，为什么呢，就是没有对它进行center，导致背景图不正常显示且向左偏移。

那就有人说了，我不想让图片居中，我就想让图片向左向下100个像素。可以这样去写： background:url(../image/hover_right.png) no-repeat 100px 100px;

这样解释大家能看的明白嘛？