title: Background-Image behind Header Section with CSS Grid
body: <p>i'm trying to recreate this template through the use of Grid. I can't figure how to create the background-image behind what i've already created 
  in my markup. Image what i'm after <a href="https://i.stack.imgur.com/10QyU.jpg" rel="nofollow noreferrer">refrence image</a> any tips?</p>
  
  <p>check my <a href="http://www.michalmacko.com" rel="nofollow noreferrer">website</a>, what have i already done, i thought to use z-indexing, but it didn't worked.. also if i apply it to the body, it will stretch with the additional content after the header section. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif, arial;
  }
  
  a{
    color: black;
  }
  
  body{
  background-color: red;
  margin: 0 auto;
  width: 80%;
  }
  
  /* .background-image{
    background-image: url(../img/bgheader.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    grid-column: 1 / -1;
    grid-row: 1 / 4;
  } */
  
  #grid-container{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-gap: 1rem;
  }
  
  header{
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: 1fr 11fr;
    grid-template-rows: 1fr 10fr 1fr 4fr;
    margin-top: 5rem;
  }
  
  header ul{
    display: flex;
    justify-content: flex-end;
  }
  
  header ul li:nth-child(-n+3){
    margin-right: 3rem;
  }
  
  header ul a{
    text-transform: uppercase;
    font-weight: 400;
    color: white;
  }
  
  header a:hover{
  color: grey;
  }
  
  .slogan{
   grid-row: 2 / 3;
   grid-column: 1 / 3;
   justify-self: center;
   align-self: center;
   text-align: center;
  }
  
  .slogan h1{
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }
  
  .more{
    color: white;
  }
  
  .services{
    color: #4a4747;
    grid-row: 4 / 5;
    grid-column: 1 / 3;
    justify-self: center;
    align-self: center;
    text-align: center;
    padding: 0 20rem;
  }
  
  .services h2{
    margin-bottom: 1rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;title&gt;Brackets Junior&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id="grid-container"&gt;
  
      &lt;!-- Header Section --&gt;
        &lt;header&gt;
          &lt;a href="#"&gt;&lt;img class="logo" src="img/logo.png" alt="logo"&gt;&lt;/a&gt;
          &lt;nav&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;div class="slogan"&gt;
          &lt;h1&gt;Always a step ahead go pro&lt;/h1&gt;
          &lt;a href="#" class="more"&gt;Learn more..&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="services"&gt;
            &lt;h2&gt; We provide the best services&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia voluptatum blanditiis expedita ducimus fugit rem, qui repellat, quos totam ipsa reprehenderit eum laboriosam maiores. Eum fugit provident error velit soluta, praesentium enim dolorum architecto, quis quisquam magnam! Sequi voluptas consequatur dolor asperiores rem eaque voluptatem necessitatibus laborum alias, omnis atque.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/header&gt;
  
  
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>