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

[zjgsamuel]

我一开始的想法很简单
用 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 这个背景无法显示呢?

[summic]

Google 找不到答案，一定是你提问的方式不对

[jasonchao]

background-size: cover;

[zjgsamuel]

@summic 恩 是的 我真的找了好久了 .... 就想实现类似 http://www.creatance.net/ 这样的网站那
@jasonchao 后来我改成了 cover; 貌似也是不行那~~

[ttym7993]

谷歌：jquery superbgimage

[haiyon]

写了个简单demo，请自行查阅代码 http://cstheme.com/backgroud-cover.html

[chairuosen]

我想的是，第一屏的div background-size:100%然后js控制高度

[zjgsamuel]

@haiyon 多谢啦~ 我再试试看
@chairuosen 我再试试

[XadillaX]

`jquery.backstretch.min.js`

我叫雷锋。

[XadillaX]

咦-。 - V2EX不是markdown的啊

[SoberZhou]

@haiyon 如果是轮播图的话 有什么方式么…… 用的Bootstrap 3 没有办法自适应……

[zjgsamuel]

@SoberZhou 我后来用了自己的笨办法， 不适应的原因是我的一个CSS 没有写好 再其他的文件里头没有用 background-size: cover; 后来更正了就ok 了