Можно ли сделать прокрутку в другую сторону?

Question

[Руслан Сайфуллин]

У боди задана картинка:

body {
    background-image: url('/images/bg2.jpg');
    background-position: 50% 100px;
    background-size: cover;
}

На странице имеется просвет между блоками, в который видно фоновую картинку.
https://jsfiddle.net/L1yeu682/2/
Соответственно при прокрутке вниз, через просвет, я вижу картинку всё выше и выше.
А цель , сделать так, чтобы при прокрутке вниз background-position-y фоновой картинки уменьшался, с чуть большей скоростью, и при прокрутке вверх background-position-y увеличивался , с чуть большей скоростью, чем прокрутка страницы.

Вопросы:
1)Можно ли обойтись средствами css?
2)Накидал скриптик https://jsfiddle.net/L1yeu682/9/ , но он косячит с прибавлением и уменьшением. Если прокрутить вниз и вернуться наверх, не будет исходного значения background-position-y
3) И на реальном проекте используется картинка довольно большая, и есть ощущение, что данный скрипт очень сильно напрягает страницу. Можно ли оптимизировать скрипт или может есть более хорошее решение?

Answer 1

[Юрий Есин]

Если я правильно тебя понял, ты пытаешься добиться эффекта т.н. "Parallax"? Есть готовые библиотеки JS, так же можно сделать на CSS3, оптимизация во втором случае будет заметно лучше, особенно на больших изображениях.

50+ Best jQuery Parallax Plugin
Параллакс на чистом CSS

Comments

[Руслан Сайфуллин]

Да, вроде то, что нужно, только мне кажется на body это не получится, нужно будет дополнительный слой на фон ставить

[Юрий Есин]

Руслан Сайфуллин: Да, фон идет одним слоем, остальные данные - другим слоем поверх него.

Answer 2

[Роман]

c помощья цсс:
background-attachment: fixed;