图片在中心，平铺或缩放

让我们来看看下面的一个网站的图片。 这是建立在1024 × 768屏幕分辨率： 

 
正如你可以看到，在该分辩率下，并没有什么错误的设计，但是让我们看看它是如何在1680 × 1050分辨率所示： 

 
该图像中使用的背景是中心。 网站形象图并没有融入背景。 要避免使用这样的背景图像，并确保该照片是在足够大的宽度为最常用的屏幕 。最好的解决办法是融入背景图像的角落，让有更大的屏幕分辨率的用户不会注意到它。
如果你不知道如何每个浏览器渲染和图像的设置情况，背景图切割可能会非常棘手。
 
在网页中每个背景图都可以通过CSS样式表在各种不同的浏览者重复使用。使用样式表中的重复属性可以设置在浏览器中如何显示它。例如：
 
body {background: url(”images/sample.jpg”) repeat-x; }
上面的代码意思是将sample.jpg插入网页body中，并重复平铺。 repeat-x属性的意思是图形沿X轴重复。你可以使用以下的重复样式。
 
* repeat-x 沿X轴重复
* repeat-y to 沿Y轴重复
* repeat-xy 沿X，X轴重复
* no-repeat 不重复图片
 
以下是CSS中代码示例：
body { background: url(”images/sample.jpg”) repeat-x;} 
body {background: url(”images/sample.jpg”) repeat-y; } 
body { background: url(”images/sample.jpg”) repeat-xy; }
body {background: url(”images/sample.jpg”) no-repeat; }
另外上面的代码不仅局限于body元素，实际上它可以应用于网页上任何的标签。

为了正确地平铺图片，你必须确保图片的边缘可以对接，产生一个无缝的背景。例如，下面的图案。

为了创建一个无缝的网页背景，设计师需要将图片的右边同左边以及上下边缘都融为一体，就像下面的图片：

 
你可以看到各个单独的图像，边缘是可以彼此融入的。创建的单独图片如下：

 
另外一个网页设计师应该考虑到不同的图像优化，最常用的图像格式有：
 
* GIF
* Jpeg 
* PNG

GIF图片格式可以优化简单的图形画面，如文本、图形中的方形、圆形。而不太适合照片。例如：
 
Sample GIF , 图片大小: 3,3KB 

 
Sample Jpeg ,图片大小: 13,5KB

你可以比较清晰地看出JPEG图像格式不太适合图形。在这个案例中图像应该最大的优化后用于节省下载量。