Логика простая:
1. Для блока определяем размеры, соответствующие экрану.
2. Устанавливаем фоновое изображение и фиксируем его.
<div class="home">
...
</div>
На чистом CSS:
html, body {
height: 100%;
position: relative;
width: 100%;
}
.home {
background: url("../images/content/home.jpg") center no-repeat fixed;
height: 100%;
position: relative;
width: 100%;
-khtml-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
Если высоту блока по каким-либо причинам нельзя задавать через CSS, то JQuery - в помощь (при этом в CSS-файле не нужно указывать высоту
html,
body и блока с классом
home):
$(document).ready(
function(){
$(window).resize(function(){
var height = $(window).height();
$('.home').css({
'height':height
});
}).resize();
}
);