大型居中背景圖片

我正在建立一個960px設計的網站，但設計師還要求該頁面有一個完整的寬度的背景照片。他爲此提供了一張2000像素的圖像。大型居中背景圖片

但是，狡猾的是，照片的一部分是整個頁面的導航，所以圖像需要居中。所以我想讓左邊和右邊溢出視口。我試圖使用CSS來做到這一點，但失敗了。

我可以做一個JavaScript版本來調整基於視口的左邊距當文檔加載和窗口調整，但我希望它可能表現不佳，尤其是在調整。許多網站的目標受衆都有一些嚴重的傳統硬件，所以會使用運行IE6的慢速計算機。有沒有一個好的CSS方法來做到這一點，會表現更好？

更新：對不起，我不是很清楚「全寬」的東西。該網站的內容全部限制在960px列，，但這個特殊圖片應該是瀏覽器窗口的全角，即使它大於960像素。使用background-position是我已經嘗試過的方法，但是如果我將特定div的大小設置爲2000px寬，則我無法居中div，而如果將其設置爲100％背景位置：中心似乎並沒有工作，你能做到這一點是background-position: center top;

來源

2013-02-18 Si Wilkins

的一種方式，把2000像素圖像作爲背景，以一個960像素的div像這樣：

DEMO

至於我意識到這是支持IE6 +

來源

2013-02-18 15:18:56 Andy

非常感謝。不幸的是，我沒有很好地解釋這個問題 - 請參閱上面的更新。 – 2013-02-18 16:29:17

@SiWilkins只需使用兩個div，然後一個「背景」div，一個內容div，將內容div覆蓋在背景之上 – Andy 2013-02-18 16:43:27

@SiWilkins下面是我想要的一個工作演示：http://jsfiddle.net/Bg4Hs/9/ – Andy 2013-02-18 16:49:37

-1

在圖像上嘗試這樣的事情：

position: absolute; 
left:50%; 
margin-left:-1000px; /* half the width of the image */

但是，如果圖像的一部分將用於導航，並且它具有固定的2000像素寬度，我會在未來看到很多眼淚。

考慮將圖像分爲可以單獨操作的圖層。

編輯：正如邁克爾所說，這種方法並不好。

來源

2013-02-18 15:23:24 cernunnos

他可以使用背景定位來定位圖像。 – Michael 2013-02-18 15:25:21

它仍然是一個2000像素的圖像，將用於對960px設計網站的實際組件進行樣式設計。但是你是對的，定位圖像的背景是一種更好的方法，不需要包裝來隱藏溢出。 – cernunnos 2013-02-18 15:32:44

只需使用背景定位。

body { 
    background: url(blah.jpg) center top no-repeat; 
}

來源

2013-02-18 15:26:29 Michael

大型居中背景圖片

回答

相關問題