我有标题（100％宽度，277像素高度），在header我应该有背景图像，x重复，它将保持在相同位置 （x轴位置），在所有分辨率上（实际上1024+，不需要移动版本至今）。 这是它应该如何看待所有决议：
http://sofzh.miximages.com/javascript/5rT4Xi9.png?1 （见下面的利润和云线 – 这是正确的位置）
但是，通过改变分辨率，背景图像也改变了它的位置……
HTML：
Helping you profit
from the Web
CSS：
header { width:100%; height:277px; z-index:999; position:relative; background-image:url(images/clouds2.png); background-repeat:repeat-x; background-position:-133px 0px; }
http://jsfiddle.net/kF7Br/
测试链接： http ： //bybyweb.com/webopps/
我尝试过媒体查询（不是那么聪明的解决方案，你可以看到我的CSS的底部，但没有成功），我已经考虑过js / jquery解决方案，但不知道如何制作它……我被打开了各种黑客/解决方案（css，jquery，html结构更改）。
您可以使用此代码：
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');
但是你必须做一些数学运算才能把它放好。
小提琴： http ： //jsfiddle.net/kF7Br/1/
你尝试过设置吗？
background-attachment:fixed;
此外，如果您不需要其位置为相对位置，请将其设置为绝对位置。
对于桌面版，我建议使用顶部和中心关键字而不是像素。 这种方法看起来很好，直到大约400px宽，在那个宽度，您可以使用响应式媒体查询覆盖像以前一样的像素值。
background-position:top center;