將固定背景與CSS對齊

Question

我希望我所嘗試的並非不可能。

讓我先解釋一下：我有一個響應式設計，需要在某些情況下（媒體查詢塊）修復背景。所討論的設計是本之一：

http://think-open.at/fileadmin/templates/responsive/content.html

基本上有兩種媒體查詢：一個用於最大高度，一個用於最小寬度。如果有足夠的視口高度，則在內容區域中有一個滾動條，並且設計高度是固定的。但是，如果視口不足以顯示預定義的高度，那麼height-mediaquery會從內部div中移除滾動條，因此不會有兩個嵌套的滾動容器（body + div），並將內容區域設置爲height：auto。

如果視口太窄，但是這個功能完美無缺，還有一個響應式媒體查詢。

現在的問題：當設計切換到整個頁面滾動模式（低於830px高度）時，我想將圖像放在正確的容器「固定」，因此它不會滾動出視口。但是隨後問題出現了，我無法真正地將背景視爲關於容器div的位置，因爲「固定」位置是關於視口的背景圖像。我創建了一個CSS小提琴這裏：

http://dabblet.com/gist/ae5c3598e1465ce0c90e

如果你改變你的寬度注意到這個問題。我想讓圖像的右邊框與綠框的右邊框對齊。

這是不是有可能？我使用calc（）沒有問題，因爲如果檢測到較舊的瀏覽器，我的CMS中會有一個條件使用普通的舊式設計。

Answer 1

我現在自己解決了。抱歉發佈。

訣竅是：當我的設計居中時，我開始嘗試使用calc（50％+ somepixelvalue）。這完成了這項工作。

我調整了CSS操場： http://dabblet.com/gist/5b63553f47a81f3bb701

現在的形象與綠色區域的右側邊界線始終。縮放時，有時會有1個像素的差異，但這並不重要，因爲背景將分配給某個充當掩模的容器元素。