有全屏图像的内容？

Question

我的标题是高度和宽度为100％的图像。我想在图像下面有一个部分，所以当我向下滚动时，该部分从图像结束处开始。不幸的是，我搜索了谷歌并试图找到解决方案但不看。

这是我的代码

body {
  margin: 0;
  padding: 0;
}


/* Globals */

.container {
  min-width: 80%;
  float: center;
}

ul {
  padding: 0;
  margin: 0;
}

h3 {
  margin: 0;
  padding: 0;
}


/* End Globals */

header {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../resources/img/header.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

header .container #branding h1 {
  display: block;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 70px;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
  padding: 0;
  font-family: Roboto;
  color: #fff;
  margin-top: -0.5em;
  padding: 30px;
  border: solid 3px #fff;
}

header .container #menu {
  display: inline-block;
  margin: 10px;
  float: left;
}

header .container #menu svg {
  cursor: pointer;
  margin: 0;
  padding: 0;
}

header .container #menu svg path.fill {
  fill: white;
}

header .container nav ul {
  float: right;
  margin-top: 15px;
}

header .container ul li {
  display: inline-block;
  text-decoration: none;
  font-size: 20px;
  padding-right: 20px;
}

header .container ul li a {
  text-decoration: none;
  color: #fff;
  font-family: Roboto;
  text-transform: uppercase;
}

header .container ul li a:hover {
  border-bottom: 1px white solid;
}

section #About-Me {
  position: relative;
  top: 100%;
  width: 100%;
  height: 200px;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<header>
  <div class="container">
    <div id="branding">
      <h1> CT Designs </h1>
    </div>
    <div id="menu">
<svg height="40px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="40px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="fill" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a> </li>
        <li><a href="#">About Me</a> </li>
        <li><a href="#">Projects</a> </li>
        <li><a href="#">Contact</a> </li>
      </ul>
    </nav>
  </div>
</header>

<section id="About-Me">
  <div class="container">
    <h3> About Me </h3>
  </div>
</section>