0

Делаю лэндинг(как дз) нужна помощь! Нужно сделать div с фоновым изображением во весь вьюпорт браузера, на этом диве еще один с логотипом компании по центру, все должно быть резиново и на любом мониторе во весь экран. после прокрутки начинается основная страница.

1 ответ 1

3

Попробуйте так:

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();

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.