在調整瀏覽器窗口大小時保持背景圖像居中

因此，我正在爲SMF論壇進行佈局，並且當瀏覽器窗口足夠寬時，背景圖像完美居中。但是，當我開始縮小瀏覽器窗口時，背景圖像開始向左移動。這裏是我的後臺當前CSS：在調整瀏覽器窗口大小時保持背景圖像居中

body 
{ 
    background: #fefff1 url(../images/img/bg.gif) no-repeat; 
    background-position:top center; 
    margin: 0 auto; 
    color: #7C3C4A; 
    padding: 0px 5%; 
    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif; 
}

以下是論壇的截圖，讓你可以更好地觀察它：

http://i.imgur.com/49pRI.png

來源

2012-03-06 user1251167

你的代碼似乎是正確的。

我所做的唯一的事情就是鞏固背景位置到相同的背景屬性往上頂，像這樣：

body { 
    background: #fefff1 url(../images/img/bg.gif) no-repeat top center; 
    margin: 0 auto; 
    color: #7C3C4A; 
    padding: 0px 5%; 
    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif; 
}

下面是它的一個JFiddle - JFiddle Link

來源

2012-03-06 02:13:40

哦沒關係。但問題仍然存在。 – user1251167 2012-03-06 02:35:51

body 
{ 
    background-color: #fefff1; 
    background-image: url(../images/img/bg.gif); 
    background-position: center center; /* First value is from left and second is from top. You can use use number as well*/ 
    background-repeat:no-repeat; 
}

來源

2012-03-06 02:13:48 Jay

不完全是我想到的。我在第一篇文章中添加了一個截圖供參考。 – user1251167 2012-03-06 02:40:07

你會給我實際的鏈接，所以我可以看看。基本上背景圖像不會縮小。 – Jay 2012-03-06 02:43:07

看看這個：http://jsfiddle.net/VPPRu/ – Jay 2012-03-06 02:47:06

在調整瀏覽器窗口大小時保持背景圖像居中

回答

相關問題