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

Question

我正在为一个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

- user1251167

Answer 1

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;
}​

- Jay

---

不完全符合我的意思。我在第一篇帖子中添加了一张截图供参考。 - user1251167

你能给我实际的链接，这样我就可以看一下了。基本上背景图片不应该缩小。 - Jay

您需要登录才能查看。用户名= testaccount | 密码= 123456 - user1251167

问题不在于背景图片。你需要将body的padding设置为0。现在它从两侧分别是5%。这个padding会将你的body向右推，让你觉得背景图片正在缩小。 - Jay

Answer 2

你的代码看起来很正确。

我做的唯一一件事就是将background-position整合到与顶部相同的background属性中，像这样：

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 链接

- francisco.preller

---

哦，好的。然而问题仍然存在。 - user1251167