圖形背景圖像的內容中心div，從遠處的容器邊緣到達屏幕的左邊緣？

Question

我有一個頁面上的一箇中心內容的div：

<div id="container> 
</div> 

#container { 
margin: 0 auto; 
width: 960px 
} 

我希望有一個背景圖片，1px的高和寬1000像素梯度的#container的右邊緣跨越到的左邊緣網頁瀏覽器。我已經制作了漸變，所以邊緣顏色是純色，所以我希望只需指定純色作爲背景，所以如果瀏覽器變得超寬，它看起來並不難看。

任何想法如何做到這一點？ 謝謝！

Answer 1

如果我正確地跟着你，解決方案需要你磨砂梯度背景圖像和相應的元件內水平居中（無論是#container或它的直接父元素）。 #container的padding值的調查也可能會產生一些好的結果。

Answer 2

我想你的意思是something like this。

並且在窗口的總高度上拉伸左側顏色，將absolute替換爲fixed。

但它是很容易使背景圖像說3000個像素寬（且只有中心包含梯度，like this one 960個像素），並如下連接到後臺：

body { 
    background: url('/images/gradient3000x1.png') repeat-y center; 
} 

然後你不不必擔心內容的高度。