Landing (like ds) need help! You need to make a div with a background image in the whole browser viewport, on this diva there is another with the company logo in the center, everything should be rubber and on any monitor in full screen. after scrolling the main page begins.

    1 answer 1

    Try this:

    http://jsfiddle.net/vyajnv7c/1/

    http://jsfiddle.net/vyajnv7c/1/embedded/result/

    The markup is as follows:

    <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>

    With these styles: (sorry, I use the SCSS preprocessor)

     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; } }

    If you need support for outdated browsers, then I implement the block "full screen" like this: ( 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();