Javascript 如何使背景图像的位置在所有分辨率上保持不变？

我有标题（100%宽度，277px高度），在

标题

中，我应该有背景图像，x重复，它将在所有分辨率下保持在相同的位置（x轴位置）（实际上是1024+以上，到目前为止不需要移动版本）。这就是它对所有决议的看法：

（见利润和下面的云线-这是正确的位置）

然而，通过改变分辨率，背景图像也会改变它的位置

HTML:

韦博普斯

测试链接：

我尝试过媒体查询（不是很聪明的解决方案，你可以在我的css底部看到，但没有成功），我考虑过js/jquery解决方案，但不知道如何实现。。。我对各种黑客/解决方案（css、jquery、html结构更改）都很开放。

您尝试过设置吗

background-attachment:fixed;

---

此外，如果不需要将其位置设置为相对位置，请将其设置为绝对位置。

对于桌面版本，我建议使用顶部和中心关键字，而不是使用像素。这种方法在大约400px宽之前看起来不错，在这种宽度下，您可以像以前一样使用响应媒体查询覆盖到像素值

background-position:top center;

---

您可以使用以下代码：

function bgPos(){
    var w = $(window).width() - $('#header-content').width();
    w = w/2;
    $('#header').css('background-position', w+'px 0')
}


$(window).on('resize', bgPos).trigger('resize');

但是你必须做一些数学才能把它放好

---

Fiddle:

是的，我尝试过（背景附件：已修复），没有成功，具体案例，如您所见。。。内容是1000像素宽，图像更宽。。。此外，我还尝试添加新的html元素来保存图像，并改变位置属性…太棒了！就这样！非常感谢你！感谢您的回复，但是，由于特定的图像（裁剪不是很好），我无法应用它。。。如果不同的图像有问题/裁剪不同，这可能是一个解决方案。我能够通过在firebug中编辑css属性使其工作，图像的裁剪并不重要。我建议您不要使用javascript来修复css问题，除非您真的需要。background-position:top-center；稍微将图像移出所需位置（请参阅我发布的imgur图像链接），如果没有一些额外的代码，我不确定它是否可以使用，在这种情况下……如果您稍微更改html结构，您可以使用简单的css轻松定位此元素，并且背景不会在调整大小时跳转。演示：要将图像精确移动到需要的位置，请在#header2:padding left:630px；右边距：-630px；

background-position:top center;

function bgPos(){
    var w = $(window).width() - $('#header-content').width();
    w = w/2;
    $('#header').css('background-position', w+'px 0')
}


$(window).on('resize', bgPos).trigger('resize');