图像切片 - 一个大图像或一系列较小的图像

Question

我正在将一个新设计切割成有效的HTML/CSS。这个特定的设计有几个非常详细的图像，我正在讨论如何分割它们。

Here是包含我看到的不同选项的文件夹的链接。有四个适当命名的图像 - bg.brickLeft，bg.brickMiddle，bg.brickMiddle，bg.combined。

我只想在其他网络开发人员如何打破这种设计的一些输入。 bg.combined显然是最终产品的样子。

我倾向于bg.combined，因为1）较少css 2）一个http请求 - 但CSS纯化者在我尖叫，甚至想要将梯度分隔成3px宽的可重复图像。

我很关心bg.combined的方法，因为它在加载较慢的连接时看起来不那么漂亮。

你会如何斩断这种设计？

对于这两种方法，您看到哪些技术专业人员的/ con？

你会接近完全不同吗？

编辑 - 此外，该网站的高度是静态

Answer 1

对不起，给人们的宽屏东西看一个狂热的（你提到静态的高度，但实在是没有这样的东西静态宽度），所以对于我来说，我会将砖块左/右放入一个可以很好地重复的图像中，并将repeat-x应用到该图像上，以便宽屏幕用户看到更多墙壁。

除此之外，我会离开中心一个作为我的内容背景在页面中心的div。所以它的缺点是，我会做2张图片，砖块作为body背景和图案化的'middleBrick'作为我的页面包装div背景。

Answer 2

我结束了这些图像，除了添加更广泛的背景。

Here是最终结果