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

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

Answer 2

您的代码似乎是正确的。

我所做的只是将背景位置合并到相同的背景属性中，如上所示：

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

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

2 个答案: