Переместить фоновое изображение в зависимости от ширины браузера

.leavesbg {
  background: #f7fff7 url(/images/leaves4.png) repeat-y fixed 480px top;
}

Поэтому, если страница просматривается с шириной более 800 пикселей, я бы хотел переместить изображение bg на половину намного дальше вправо. То есть, если бы они смотрели его, например, в формате 1024x640, я бы хотел добавить 112 ((1024-800)/2) к ширине (так ... fixed 592px top;

Вот моя попытка JQuery переместить его

function moveBG() {
    var bgoffset =480;
    var pagewidth = $('body').width();

    if (pagewidth>800) {
        bgoffset=pagewidth-bgoffset;
        bgoffset=bgoffset/2;
    }
    $('.leavesbg').css(background-position: bgoffset +'px top');
}


    $(document).ready(function(){
    moveBG();
    $(window).resize(moveBG);

});

Я ожидаю, что просто забыл что-то простое, но я все еще относительно новичок в jQuery.

3 ответа

Решение
bgoffset=bgoffset+'px top';
$('.leavesbg').css('background-position', bgoffset );

Так что я неправильно делал некоторые исходные математические вычисления (но это не очень важно для реального вопроса), но насколько я могу судить, фактической ошибкой в ​​моем коде была строка "изменить css", и я думаю, что это работает. Вероятно, есть лучший и более эффективный способ сделать это, чем булыжник, который у меня есть выше, так что я все равно буду приветствовать предложения о том, как лучше его кодировать. Благодарю.

Хорошо, вы обнаружили синтаксическую ошибку в присваивании.css(attr,value). Однако если ваш pagewidet <= 800 фоновая позиция равна "480", а не "480px top;" что я думаю, что вы хотите. Также запомните общий метод с css: если ваш элемент с классом.leavesbg имеет атрибут style после атрибута class, а стиль имеет background-position, он выигрывает.

Я ответил на этот же вопрос с этой скрипкой:

http://jsfiddle.net/9ZgWg/26/

Вот оригинальный вопрос: центрирование img внутри div - размер обоих

Другие вопросы по тегам