在调整浏览器窗口大小时保持背景图像居中

因此，我正在为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

在调整浏览器窗口大小时保持背景图像居中

回答

相关问题