<div class="header">
  <h1>Simple SVG header</h1>
  <svg width="1000" height="100" viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0
             L 400 0 
             L 300 90
             L 0 100
             L 0 0
             "
            fill="#a6a03b"
          />
      <path d="M0 0
             L 950 0 
             L 900 30
             L 0 80
             L 0 0
             "
            fill="#b4d455"
          />
    <path d="M0 0
             L 900 0 
             L 600 80
             L 200 100
             L 0 0
             "
            fill="#848f45"
          />
    <path d="M0 0
             L 600 0 
             L 450 100
             L 0 80
             L 0 0
             "
            fill="#b4d455"
          />
  </svg>
  </div>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat tempore exercitationem sapiente cupiditate dignissimos libero architecto quos laudantium, obcaecati corrupti, odio amet fuga nihil corporis. Eius quod distinctio debitis libero!</p>
svg {
  width:100%;
  height:auto;
  display: block;
  margin: -10px -10px 0;
}
.header {
  top: 0;left: 0;right: 0;
  position: relative;
  color:white;
  position: fixed;
  h1 {
    position: absolute;
    top: 40%;left: 2%;
    transform:translateY(-50%);
    max-width:100%;
    font-weight: normal;
    margin: 0;
    
  }
}


body {
  font:1em Verdana,sans-serif;
  color:#343;
  
  margin:0;
  padding: 10px;
  padding-top:10%;
}
View Compiled
Rerun