有滚动条时背景固定不居中答案

【问题标题】：Background fixed not centered when there is a scrollbar有滚动条时背景固定不居中
【发布时间】：2012-06-11 08:15:54
【问题描述】：

我的容器背景有问题。当有滚动条时，我的内容和我的背景之间就有了差距。没有滚动条时没有任何问题。

capture

我认为这是因为我的背景以整个窗口为中心（包括滚动条），而我的内容以边缘为中心：0 auto; （不包括滚动条）。

这是我的 css 代码...

#container{
    background-image:url('../img/container.png');
    background-attachment:fixed;
    background-position:top center;
    background-repeat:no-repeat;
    margin:0 auto;
    width:900px;
    padding:0 37px;
    padding-bottom:25px;
    }

我尝试在左侧添加 15px 的填充，它可以工作，但是当没有滚动条时，它不再居中！当我的背景不固定时，它也可以工作，但我需要保持固定...

你有解决这个问题的方法吗？

【问题讨论】：

标签： css background scrollbar center fixed

【解决方案1】：

嗯。你不能用 HTML/CSS 创建你的背景框吗？这将确保定位是一致的。

【讨论】：

你的意思是把图片直接放在html里，而不是放在css里？我刚试过。首先我认为它有效，但这是同样的问题......也许我做错了......
如果您的图片是 HTML 的一部分，则应该与您的 DIV 完美居中...

【解决方案2】：

这是错误的

background-position:top center;

第一个值是水平位置，第二个值是垂直位置。

CSS background-position Property

使用更正代码

background-position:center top;

【讨论】：