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张背景图片。 1个背景图像放在BODY上，另一个背景放在中心对齐的DIV上。

如果身体没有像您的示例中那样的边距，并且您使浏览器小于1344像素，则您将不再看到身体背景。为了确保在内容很短的情况下，没有任何奇怪的效果你可以给DIV最小高度100％。

也许看一下使用此技术的网站：http://www.prgs.nl/

背景图像定位问题

4 个答案: