根据浏览器宽度移动背景图像答案

【问题标题】：move background image based on browser width根据浏览器宽度移动背景图像
【发布时间】：2011-04-28 04:15:12
【问题描述】：

.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 还是比较陌生。

【问题讨论】：

标签： css jquery

【解决方案1】：

bgoffset=bgoffset+'px top';
$('.leavesbg').css('background-position', bgoffset );

所以我做的一些原始数学错误（但这与实际问题并没有太大关系），但据我所知，我的代码中的实际错误是“更改 css”行，我认为这行得通。可能有比我上面的鹅卵石更好，更有效的方法，所以我仍然欢迎有关如何更好地编码它的建议。谢谢。

【讨论】：

【解决方案2】：

我用这个小提琴在类似的问题中回答了这个问题：

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

这是原始问题：centering an img within a div - both being resized

【讨论】：

【解决方案3】：

很好，您在 .css(attr,value) 赋值中发现了语法错误。但是，如果您的 pagewidet

【讨论】：

bgoffset=bgoffset+'px top'; 在 if 语句之外，因此如果宽度为 px top 添加到其中。