Переместить фоновое изображение в зависимости от ширины браузера
.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, он выигрывает.
Я ответил на этот же вопрос с этой скрипкой:
Вот оригинальный вопрос: центрирование img внутри div - размер обоих