窗口大小調整時居中背景圖像的最小邊距

我有一個背景圖像，它使用CSS垂直和水平居中。它看起來很棒，只要窗口足夠大以顯示背景圖像，它就會工作。窗口大小調整時居中背景圖像的最小邊距

當窗口大小比bg圖像小時，我遇到了問題。發生這種情況時，bg圖像繼續居中，但我需要在bg圖像的頂部和左側保持最小的邊距。該BG圖像是900px X 700像素，和我使用的代碼是：

#main_wrapper { 
    background-image: url(../images/background.jpg); 
    position:relative; 
    width:900px; 
    height:700px; 
    left:50%; 
    top:50%; 
    margin-left:-450px; 
    margin-top:-350px; 
}

任何解決方案都需要繼續在水平和垂直居中的背景圖片時，窗口大到足以允許它，但會當窗口比bg圖像短時在頂部具有最小邊緣，並且在窗口比bg圖像窄時在左邊具有最小邊緣。任何幫助將不勝感激。謝謝。

來源

2012-07-12 RustyChains

如果這是在<body>中，我會在身體的開始位置添加兩個額外的div，絕對定位並且具有白色背景色，以確保在該區域背景圖像不是沒見過。

然後用<div>包裹你在身體中的剩餘部分，並且使其成爲position: relative。

我認爲這應該導致你想要的。

來源

2012-07-13 10:33:14

窗口大小調整時居中背景圖像的最小邊距

回答

相關問題