How to: background-size: 100% auto, background-attachment: s

Question

Firefox有一个关于background-attachment和background-size的奇怪bug。我称它为bug，我怀疑它不是，但它呈现的方式我认为它应该在其他主要浏览器(强调我认为)。期望的效果是在保持图像比例的同时，将垂直重复的背景大小调整为100%的宽度。

这是我最初的CSS，在这个版本中，背景根本不会为firefox渲染(即使有firefox特定的背景标签)。

body {
    background: #000 url('../background.jpg') left top repeat-y;
    background-attachment: scroll;
    background-size: 100% auto;
}

将background-attachment: scroll;更改为background-attachment: fixed;会导致背景渲染，但不希望"浮动背景"行为。

(更新)

删除背景位置会使图像再次正确渲染。

。

body {
    background: #000 url('../background.jpg') repeat-y;
    background-size: 100% auto;
}

这实际上是一个有问题的修复，因为我的位置值实际上是'左113px'。我可以通过将背景应用于站点标题下面的换行div而不是body元素来解决这个问题，但事实仍然是Firefox在呈现background-size: 100% auto;当使用位置值并且附件为滚动时。

(更新2)

我意识到这个bug只有在有额外的CSS时才会出现。这并不是说额外的CSS有问题(它不是)，而是说这个Firefox特定的渲染错误在某种程度上是由它引起的。

额外的CSS(用于创建灵活的100%高度布局)

html {  width: 100%;    height: 100%;   position: absolute; }

和完整的body CSS来复制这个bug

body  {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: #000 url('image.jpg') top left repeat-y;
    background-size: 100% auto;
}

(解决方案)

我解决了这个问题，立即在正文中创建了一个额外的包装div，并在那里附加背景，而不指定位置属性。

#wrapper {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') repeat-y;
    background-size: 100% auto;
}

但是因为我现在有了一个额外的包装器，我可以继续并从html中删除位置，高度和宽度属性，使错误变得毫无意义，并允许我设置背景的位置。

Answer 1

我解决了这个问题，我立即在正文中创建了一个额外的包装div，并在那里附加了背景，而不指定位置属性。

#wrapper {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') repeat-y;
    background-size: 100% auto;
}

但是，因为我现在有了一个额外的包装器，所以我可以继续从html中删除位置、高度和宽度属性，使错误变得没有意义，并允许我设置背景的位置。