CSS -background-attachment:修复不停止滚动(tumblr主题)

Question

我正在为tumblr主题编写代码，并遇到了这个问题："background attachment: fixed“不会阻止背景图像上下滚动；它仍然会随着内容移动。

HTML

<div id="content">
    <div id="posts">
        posts...
    </div>
</div>

CSS

#content {
    background-image: url('{image:Background Image}');
    background-repeat: no-repeat;
    background-attachment: fixed;

    height: auto;
    width: calc(100% - 300px);

    float: right;
}

宽度也不工作，但我被告知这只是固定的工作方式，我只是想解决图像仍然移动的事实。

Answer 1

有时主题的css文件可以覆盖您的自定义编辑。尝试将!important放在background-fixed属性中，如下所示：

 background-attachment: fixed !important;

Answer 2

仍然没有发现为什么它不工作，但我发现了一个替代方案：

为背景创建一个单独的图像，并将其放在img标签中的内容之上。

HTML

<img id="image" src="source" />
<div id="content"></div>

...then使用这个方便的CSS布局来使图像显示在内容的下面。

CSS

#image {
    height: 100%;
    width: 100%;
    position: fixed; //to prevent scrolling
    z-index: -1; //sets z-index, which wasn't working in my previous setup
}

#content {
    background: transparent;
    position: absolute;
    z-index: 1;
}

JSFiddle: http://jsfiddle.net/Minecraft_Percabeth/ah6qkj8e/