在当前背景下创建网格

Question

我不知道如何在当前背景图片下方添加网格并继续添加信息。当我现在尝试添加网格时，它只会在导航栏下方创建一个网格，而不是在当前背景下方。

/**********BODY GENERAL**********/

body {
  margin: 0;
}


/* Fix this one day */

.bg-img {
  background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

strong {
  font-weight: bold;
}


/*********NAVIGATION*********/

nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1em;
  grid-auto-rows: auto;
  text-align: center;
  align-items: center;
  background: /*rgba(255, 51, 0, .95);
 */
  z-index: 10;
}

@media screen and (max-width: 900px) {
  nav {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 1em;
  }
}

.menu1 {
  grid-column: 1;
}

.menu2 {
  grid-column: 2;
}

.logo {
  grid-column: 3;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  font-size: 28px;
  width: 500px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 7vh;
  margin-bottom: 25px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.menu3 {
  grid-column: 4;
}

.menu4 {
  grid-column: 5;
}


/**************HOVER ANIMATION**************/

div>a {
  font-family: 'Raleway';
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  position: relative;
  font-size: 0.8rem;
}

div>a:hover {
  color: #000;
}

div>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

div>a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/**********MAIN HEADER***********/

header {
  color: white;
  justify-content: center;
  align-content: center;
  top: 0;
  bottom: 0;
  left: 0;
}


/**********BODY*****************/

.Minfo {
  color: red;
  width: 100%;
  padding-top: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
}

.subtitle {
  padding-left: 4em;
  padding-top: 29em;
  font-size: 100%;
  color: #fff;
}

.title {
  font-size: 3em;
  text-align: left;
  color: #FFF;
  padding-bottom: 0px;
}

.subtext {
  padding-top: 0px;
  color: #FFF;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Centennial It's Academic</title>
  <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="main.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>

<body>
  <div class="bg-img">
    <header>
      <nav class="container">
        <div class="menu1">
          <a class="navLinks" href="#home">Home</a>
        </div>
        <div class="menu2">
          <a class="navLinks" href="#upcoming">Tournaments</a>
        </div>
        <div class="logo">
          <p>It's Academic</p>
        </div>
        <div class="menu3">
          <a class="navLinks" href="#history">History</a>
        </div>
        <div class="menu4">
          <a class="navLinks" href="#faq">Contact Info</a>
        </div>
      </nav>
      <!-- This cluster  of info -->
      <div class="Minfo">
        <div class="subtitle">CENTENNIAL
          <br>
          <div class="title"> It's Academic</div>
          <br>
          <div class="subtext">Meets every Tuesday in Room 506</div>
        </div>
      </div>

    </header>
    <!--Don't even -->

  </div>

</body>

</html>

codepen（请以整页模式打开）：

我希望它看起来如何的一个例子就像在 this 网站上，所有信息都在那个背景下。

Answer 1

我不太清楚你的意思。我想到了2个选项：

将网格推到图片下方。在这种情况下，只需将 header 标记从 .bg-img 移到后面即可。
https://codepen.io/moshfeu/pen/ERWVdZ
您想要 fixed 效果（就像您附加的网站一样）。在这种情况下，您需要在 header.
上使用 position: fixed https://codepen.io/moshfeu/pen/aKJvXW

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport

https://developer.mozilla.org/en-US/docs/Web/CSS/position

在当前背景下创建网格

Creating a Grid below current background

html

css

grid-layout