背景图像定位问题

Question

我将其作为CSS样式。 调整浏览器窗口大小时，我的#pg_wrap没有与背景图像居中。 我的屏幕截图是当您将浏览器窗口缩小为比#pg_wrap宽度小1344px时（宽度不必一定是，只是一个测试数字）。

屏幕截图是使用Firefox拍摄的。 Chrome不会这样做。 如何使背景图片保持原样？

铬

火狐浏览器

body
{
    text-align: center;
    background-image: url('p_bg_75.jpg');
    background-repeat: repeat-y;
    background-color: black;
    background-attachment:fixed
    margin: 0px;
    padding: 0px;

}
#pg_wrap
{
    margin-left: auto;
    margin-right: auto;
    width: 1344px;
    height: 1000px;
    border: 1px solid white;
    text-align: center;
}

Answer 1

区别在于浏览器以不同的方式处理错误的CSS。

更改

background-attachment:fixed

至

background-attachment:fixed;

Answer 2

您是否忘记了声明背景位置？ 请记住，text-align不对齐背景。 作为一个声明，似乎您在追求：

background: #000000 url('p_bg_75.jpg') repeat-y fixed top center;

我不能通过您的问题来告诉您您是否确实希望附件被“修复”，但是根据您的屏幕截图，我对此表示怀疑。 因此，您也可以从声明中删除它。

Answer 3

如上所述，请尝试：

background-position: center;

并粘贴HTML的摘要，以便我们可以在Safari / Chrome中进行测试。

Answer 4

通常，在中心对齐的站点上，最好使用2张背景图像。 一个背景图像放置在主体上，另一个背景放置在居中对齐的DIV上。

如果主体没有像您的示例中所示的边距，并且您使浏览器小于1344px，则您将不再看到主体背景。 为确保内容简短，没有奇怪的效果，您可以将DIV的最小高度也设置为100％。

也许看看这个也使用了这种技术的站点： http : //www.prgs.nl/