背景圖像定位問題

Question

我將其作為CSS樣式。 調整瀏覽器窗口大小時，我的#pg_wrap沒有與背景圖像居中。 我的屏幕截圖是當您將瀏覽器窗口縮小為比#pg_wrap寬度小1344px時（寬度不必一定是，只是一個測試數字）。

屏幕截圖是使用Firefox拍攝的。 Chrome不會這樣做。 如何使背景圖片保持原樣？

鉻

火狐瀏覽器

body
{
    text-align: center;
    background-image: url('p_bg_75.jpg');
    background-repeat: repeat-y;
    background-color: black;
    background-attachment:fixed
    margin: 0px;
    padding: 0px;

}
#pg_wrap
{
    margin-left: auto;
    margin-right: auto;
    width: 1344px;
    height: 1000px;
    border: 1px solid white;
    text-align: center;
}

Answer 1

區別在於瀏覽器以不同的方式處理錯誤的CSS。

更改

background-attachment:fixed

至

background-attachment:fixed;

Answer 2

您是否忘記了聲明背景位置？ 請記住，text-align不對齊背景。 作為一個聲明，似乎您在追求：

background: #000000 url('p_bg_75.jpg') repeat-y fixed top center;

我不能通過您的問題來告訴您您是否確實希望附件被“修復”，但是根據您的屏幕截圖，我對此表示懷疑。 因此，您也可以從聲明中刪除它。

Answer 3

如上所述，請嘗試：

background-position: center;

並粘貼HTML的摘要，以便我們可以在Safari / Chrome中進行測試。

Answer 4

通常，在中心對齊的站點上，最好使用2張背景圖像。 一個背景圖像放置在主體上，另一個背景放置在居中對齊的DIV上。

如果主體沒有像您的示例中所示的邊距，並且您使瀏覽器小於1344px，則您將不再看到主體背景。 為確保內容簡短，沒有奇怪的效果，您可以將DIV的最小高度也設置為100％。

也許看看這個也使用了這種技術的站點： http : //www.prgs.nl/