Учитывать при параллаксе фона background-position: 50% 50%?

Question

[Чёкатилло]

Имеем код:

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  $('#lk-conteyner').css('background-position', '0 '+(-scrolled*0.2)+'px');
}

Имеем стиль фона блока #lk-conteyner:

background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

И вот в чем беда:

-При попытке скролла из-за позиционирования 50% 50% фона, фон сначала "падает" в блоке top: 0 , как заставляет скрипт (ну и далее, происходит параллакс при скролле) И это падение, конечно, весь эффект портит
-А позиционирование фона необходимо оставить навсегда максимально центрированным

Можно было создать параллакс от верха страницы так:

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  $('#lk-conteyner').css('top',-(scrolled*0.2)+'px');
}

Но не подходит мне это Блок находится в плагине и у него нет родителя

Чем дополнить скрипт, что бы при параллаксе был так же спазиционированным по центру фон без дерганний его?
Через css, кажется, здесь ничего не сделаешь

Спасибо!

Answer 1

[display: block]

$('#lk-conteyner').css('background-position', '50% '+(-scrolled*0.2)+'px');

Comments

[Чёкатилло]

ды вот нет чет Все так же

[Чёкатилло]

Это получается строка по горизонтали устанавливает 50%, а надо держать в центре по вертикали фон, при этом при скролле наблюдать параллакс этого фона

[Чёкатилло]

указав в скрипте:

('background-position-y', '50% '+

скрипт не работает

[display: block]

Баба Яга, background-position-y: 50% плюс что? У position-y одно значение (y). При background-position: 50% 50% надо и оперировать процентами, а не пикселями, чтобы не прыгало. Прибавлять или вычитать проценты, в зависимости от направления скролла.

[Чёкатилло]

display: block, бфло б мне еще чего понятно =)
я так пробую:

$('#lk-conteyner').css('background-position-y', '50% '+(-scrolled*10)+'%');

На этом мои догадки иссякли )

[Милок Мурлыка]

@serovpochta

$('#lk-conteyner').css('background-position-y', (-scrolled*10)+'%');

[Чёкатилло]

Милок Мурлыка, сорри, но снова все так же здесь

[Чёкатилло]

Милок Мурлыка, сделал вот так:

background-position: 50% 0;
    top: -50%;
    height: 150%;