圖像切片 - 一個大圖像或一系列較小的圖像

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是最終結果