title: How to make a full page header?
body: <p>I'm trying to replicate making a header like <a href="https://mtthwnvk.exposure.so/southern-maine-13" rel="nofollow">this</a>, but I'm not really sure how I would go about that. I started with making an image fill the whole screen, but I can't get it to look as good as the example I provided. </p>
  
  <p>I've seen this exact kind of header <a href="http://paulstamatiou.com/photos/japan/japan-day-0/" rel="nofollow">multiple times</a>. I was wondering if there's some kind of library that makes it easier to make a header like that?</p>
  
  <p><a href="https://medium.com/mother-jones/82864cfe3990" rel="nofollow">Another example</a></p>
  
  <p>The code that I have right now (HTML and css, I did not put it together like this in the actual file obviously):</p>
  
  <pre><code>&lt;div class="cover"&gt;
  &lt;div class="filler"&gt;Text inside header&lt;/div&gt;
  &lt;/div&gt;
  
  .cover{
    background: url("../img/day1cover.jpg"); 
    background-size: cover;
    background-repeat:no-repeat;
    box-shadow: inset 0px -120px 100px -10px rgba(0,0,0,0.7);
    position: relative;
    color: rgb(255,255,255);  
  }
  
  .filler{
    width:100%;
    height: 100%;
    text-align: center;
    margin: 0;
  }
  </code></pre>