JQuery, чтобы изменить положение CSS фона на нескольких фонах

Question

Я пытаюсь через jquery изменить положение фоновых изображений элемента в зависимости от разрешения. Код:

var pwwidth = $(window).width();
var pwheight =  $(window).height();
var bg1posx = pwwidth - $('h1.portofolio').width();
var bg1posy = pwheight - $('.footer').height();
var bg2posx = $('.leftporto').width() - (pwwidth * 0.05);
var bg2posy = ($('h1.portofolio').height() / 2 ) + $('h1.portofolio').css('margin-top').replace('px', '');
$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');

В CSS вы меняете несколько фонов элемента, как это:

background-position: 100px 200px , 300px 400px;
background-position: 10% 20% , 30% 40%;

Я не могу определить, чтобы это изменить с помощью jquery, так как это не будет работать

$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');

Answer 1

В вашем коде есть синтаксическая ошибка (неправильная конкатенация строк):

Плохой:

$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');

Хорошо:

$('#content4').css('background-position', bg1posx+'px '+bg1posy+'px, '+bg2posx+'px '+bg2posy+'px');​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 2

$("#your_div_id").css("background-position","-100px 0px, 0px 5px");

это переместит 1-й фон (100 пикселей слева) и 2-й (5 пикселей сверху)

Я использую эту технику, чтобы построить обратный отсчет ползунка взглянуть http://jsfiddle.net/UR5jC/