Делаю лэндинг(как дз) нужна помощь! Нужно сделать div с фоновым изображением во весь вьюпорт браузера, на этом диве еще один с логотипом компании по центру, все должно быть резиново и на любом мониторе во весь экран. после прокрутки начинается основная страница.
1 ответ
Попробуйте так:
http://jsfiddle.net/vyajnv7c/1/
http://jsfiddle.net/vyajnv7c/1/embedded/result/
Разметка такая:
<div class="scene scene-1 at-middle">
<div class="middle">
Some content
</div>
</div>
<div class="scene scene-2">
Some content
</div>
<div class="scene scene-3">
Some content
</div>
С такими стилями: (простите, использую препроцессор SCSS)
html,body {
min-height: 100%;
}
.at-middle {
&:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.middle {
display: inline-block;
vertical-align: middle;
max-width: 95%;
}
}
.scene {
display: block;
height: 100vh;
}
.scene-1 {
background: url('/path/to/background.jpg') no-repeat 0 0;
background-size: cover;
text-align: center;
.middle {
background: orange;
padding: 30px;
}
}
Если нужна поддержка устаревших браузеров, то реализовываю блок "на весь экран" примерно так: ( http://jsfiddle.net/vyajnv7c/2/ )
var sceneControl = function(){
var $window = $(window);
var $scene = $('.scene');
$window.resize(function(){
$scene.css('height',$window.height()+'px');
}).trigger('resize');
};
sceneControl();