Fixed background

Work-around for image-attachment: fixed

HTML

<div class="container">
  <div class="fixed-img"></div>
  <h1>Look at this cat</h1>
</div>
<p>
  As you can see, the image stays in it's place
</p>
<p>
  Keep scrolling
</p>
<p>
  What's good
</p>
<p>
  Lol
</p>
<p>
  I used a picture of a cat
</p>
<p>
  Becaus...internet
</p>
<p>
  Ok well I think that's enough of that
</p>
<p>
  Good luck, guys.
</p>

CSS

.container {
  height: 100vh;
}

.fixed-img {
  background-image: url("http://2.bp.blogspot.com/-pATX0YgNSFs/VP-82AQKcuI/AAAAAAAALSU/Vet9e7Qsjjw/s1600/Cat-hd-wallpapers.jpg");
  height: 100%;
  width: 100%;
  position: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

h1 {
  text-align: center;
  color: white;
  font-size: 3em;
  position: relative;
  top: 45vh;
}

p {

  padding: 1em;
  width: 100%;
  margin: 0;
}