html - 如何使用覆盖整个屏幕的 bg-img 创建标题？

Question

我怎样才能创建一个背景图像覆盖整个屏幕直到你向下滚动？

我想创建一个类似这个页面http://www.viworx.co/sapphire/html/site/index.html图像(标题)覆盖窗口的所有高度，直到您向下滚动它(同样如您所见，它不关心您的窗口高度如何，它始终覆盖屏幕的整个高度，直到您向下滚动)

我正在检查它的代码并对其进行处理(请在下面找到它)，但我想我需要其他东西，因为正如你所看到的，它只覆盖了屏幕的一部分。我不知道我还需要什么才能让它正常工作。

谢谢

我期待着阅读你们的回复伙计们:)

.header-bg {
    width: 100%;
    height: auto;
    text-align: center;
    color: #fff;
    position: relative;}
	
	.background {
    background-repeat: no-repeat;
    background-position: 50% 50%;}
#header-parallax {width: 100vw; background: #fff;overflow: hidden; position: relative;}

.section-overlay {
    background: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.header-body {
    display: table-cell;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;}

<header id="header-parallax" class="header-bg background parallax" style="background-image: url(http://www.viworx.co/sapphire/html/site/img/bg-header.jpg); background-attachment: fixed; background-size: 1536px 864px; background-position: 50% -50px;" data-img-width="1920" data-img-height="1080" data-diff="100">
      <div class="section-overlay"></div>
      <div class="header-body">
        <div id="container-top" class="container top" style="opacity: 1;">
          <div class="row">
            <div class="col-md-8 col-md-offset-2 col-xs-12 fixed">
              <h1>Great experiences</h1>
              <h1 class="texthd" style="display: none;"><span>build</span> great <span>brands!</span></h1>
              <h1 class="texthd" style="display: block; opacity: 0.117649;"><span>build</span> great <span>designs!</span></h1>
              <h1 class="texthd" style="display: none;"><span>build</span> great <span>teams!</span></h1>
            </div>
          </div>
          <div class="row hidden-xs">
            <div class="icon-scroll">
              <p>Discover our selected work</p>
              <a href="#process" class="page-scroll"><img class="mouse" src="img/mouse.png" alt="Scroll"></a>
              <div class="icon-scroll-center"></div>
            </div>
          </div>
        </div>
      </div>
    </header>

<div style="height:500px"> HELLO HELLO TEST </div>

Answer 1

你太接近了!您只需要在 #header-parallax div 上添加一个 height: 100vh;。

请在此处查看 fiddle :https://jsfiddle.net/5nbLdxgc/