Question

我正在为CMS构建一些基本的HTML代码。 CMS中与页面相关的选项之一是“背景图像”和“拉伸页面宽度/高度到背景图像宽度/高度”。因此，对于大背景图像，整个事物变得可见。

我目前的屏幕分辨率是1280 x 1024。

如果我执行以下操作：

指定宽度为1400像素的背景图像
将“position”指定为“center center”（horiz。/ vert。）
指定“拉伸页面宽度到背景图像宽度”

然后在FF中，发生以下情况：

页面正确拉伸到1400px。我得到一个水平滚动条，因为我的屏幕小于那个。到目前为止一切顺利。
现在奇怪的是：背景图像不相对于1400px居中，因此显示完整的图像，但相对于我的视口1280px，隐藏了图像的一部分超出屏幕左边缘，并在右侧留下白色条纹，而不是显示整个图像。
没有可以操纵任何东西的其他元素（DIV，包装器......）。所有设置都直接在正文中。

更新：IE正确完成。谷歌浏览器也存在同样的问题。

就好像Firefox首先渲染100％宽度的背景图像，居中，然后注意到身体需要拉伸到1400px。

这是正常的Firefox行为吗？有什么想法我可以做什么？

发布链接会有点麻烦，因为它只是在一个封闭的开发环境中，但如果一切都失败了，我会把一些东西放在一起看看。

CSS：

body 
 {
 background-image: url(http://www.domain.com....image.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 min-width: 1400px;
 height: 100%;
 }

Answer 1

您被CSS规范的怪癖所困扰：感谢section 14.2，您应用于body元素的任何背景图片都会成为html的背景。（这是为了让作者可以继续使用身体标签上的背景，他们期望它来自CSS之前的浏览器。）

在IE中，html代表整个文档画布并展开以适合放大的体宽。在其他浏览器中，它的作用与任何其他display: block元素一样，并保持视口宽度，无论您放入什么内容。其他浏览器在这里可以说更正确，但CSS规范在这个主题上并不十分清楚，结果是IE中的结果更接近地代表了关于画布的14.2的措辞。无论哪种方式，它都没有真正规定可靠的行为。

通过在html而不是body上设置宽度和背景，您可以在浏览器中获得一致的结果。（请记住在IE中使用标准模式。）

但是1400px固定宽度的文档？听起来真的很糟糕。

Answer 2

尝试添加：

width: 100%;
display: table;

到body标记样式（也可能需要background-attachment: fixed;）

Answer 3

背景位置应保持在顶部; 你有没有设置

body{
margin:0;
padding:0;
}

Firefox背景图像水平居中奇怪

3 个答案: