CSS - background-attachment: исправлена ​​не остановка прокрутки (тема tumblr)

Question

Я делаю код для темы Tumblr и сталкиваюсь с этой проблемой: "фоновое вложение: исправлено" не мешает фоновому изображению прокручиваться вверх и вниз; это все еще перемещается с содержанием.

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

До сих пор не выяснил, почему это не работает, но я нашел альтернативу:

Создайте отдельное изображение для фона и поместите его над содержимым в тег img...

HTML

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

... затем используйте этот удобный 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/

Answer 2

Иногда CSS-файл темы может переопределить ваши пользовательские изменения. Попробуйте разместить !important в background-fixed свойство как это:

 background-attachment: fixed !important;