javascript - 调整 div 背景的大小

Question

一开始我想为我的英语道歉..
但切入正题——我在做我的第一个网站时遇到了 div 背景的问题。我想在像这样调整浏览器窗口大小时更改 div 的背景分辨率 http://kamilnizinski.pl或 http://rumblelabs.com - 正如您所看到的，当您调整窗口大小时，背景正在完全改变分辨率。在我的 CSS 文件中有

.background { 
height: 100%; 
background-image: url('img/background.png'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover; 
background-position: center; } 

所以我在不调整大小的情况下得到了图像的一部分。所以我的问题是 - 我怎样才能得到这种效果？我必须更改 CSS 中的某些内容，或者我必须使用 javascript/jQuery？
预先感谢您的回答。

Answer 1

简单的例子:

http://jsfiddle.net/xkaL2rho/

html:

<div class='background' />

CSS:

.background{
    background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
    background-size: cover;
    height:100%;
}
html, body{
    height:100%;
    width:100%;
}

另一种方法是使用 javascript:

http://jsfiddle.net/xkaL2rho/1/

CSS:

.background{
    background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
    background-size:cover;
}
html, body{
    height:100%;
    width:100%;
}

js:

$(window).resize(function(){
    doResize()    
});

function doResize(){
    var width = $(window).width();
    var height = $(window).height();
    $('.background').css({'width':width+'px',height: height+'px'})
}

doResize();