单页面的网站 怎么样才能使第一页背景图片 自适应浏览器分辨率 达到满屏显示的效果呢?

我一开始的想法很简单
用 jquery 判断一下 然后重置一下css 不就可以了?

header {
width: 100%;
height: 700px;
position: absolute;
overflow: hidden;
text-align: center;
color: #fff;
background: #333 url(../img/header.jpg) no-repeat top center fixed;
background-size: 1280px;
}

$(document).ready(function() {
var newheight = $(window).height() ;
$("header").css("height",newheight);
$(".header-bg").css("height",newheight);
$(".pattern").css("height",newheight);
});

在家里测试没有问题 但是跑到单位测试发现 背景图片没有变化，同样的浏览器，只不过是分辨率不同，我把css 的background no-repeat 取消发现 有了重复的图片

我在想是不是我用的图片分辨率不够 达不到要求的高度那 ，于是拿了了张分辨率 足够大的图片试了一下，结果图像还是智能显示到原先的高度....

我就困惑了 以上 pattern header-bg 2个层都属于 header 的为什么 pattern 这个用来蒙版的背景图片可以实现满屏显示 而 header-bg 这个背景无法显示呢?