<div class="panel">
  <div class="content">
    <h1>One of those modern, fixed-background layouts</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo nihil pariatur tempora quaerat veritatis aut, error ullam soluta ea ducimus blanditiis expedita reprehenderit vero dolor iste sapiente, rerum deleniti excepturi.</p>
  </div>
</div>

<div class="panel">
  <div class="content">
    <h2>Here is where we say we handcraft our code</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo nihil pariatur tempora quaerat veritatis aut, error ullam soluta ea ducimus blanditiis expedita reprehenderit vero dolor iste sapiente, rerum deleniti excepturi.</p>
  </div>
</div>

<div class="panel">
  <div class="content">
    <h2>And this is where we say we're code ninjas and font nerds</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo nihil pariatur tempora quaerat veritatis aut, error ullam soluta ea ducimus blanditiis expedita reprehenderit vero dolor iste sapiente, rerum deleniti excepturi.</p>
  </div>
</div>

<div class="panel">
  <div class="content">
    <h2>Man, I wish I could afford a Macbook</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo nihil pariatur tempora quaerat veritatis aut, error ullam soluta ea ducimus blanditiis expedita reprehenderit vero dolor iste sapiente, rerum deleniti excepturi.</p>
  </div>
</div>

<div class="panel">
  <div class="content">
    <h2>Why do designers like antlers so much?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo nihil pariatur tempora quaerat veritatis aut, error ullam soluta ea ducimus blanditiis expedita reprehenderit vero dolor iste sapiente, rerum deleniti excepturi.</p>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Lato:300);
* {
  box-sizing: border-box;
}
html {
  line-height: 1.8;
  font-size: 13px;
  background: #000;
  font-family: Lato, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .2em;
}

.panel {
  min-height: 90vh;
  margin: 20px;
  background: url(https://unsplash.it/g/900/900) no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  padding: 2em;
  justify-content: center;
  align-items: center;
  
  &:nth-child(2) {
    background-image: url(https://unsplash.it/g/901/600);
  }
  &:nth-child(3) {
    background-image: url(https://unsplash.it/g/900/601);
  }
  &:nth-child(4) {
    background-image: url(https://unsplash.it/g/900/601?image=0);
  }
  &:nth-child(5) {
    background-image: url(https://unsplash.it/g/900/601?image=577);
  }}

.content {
  max-width: 400px;
  text-align: center;
  padding: 2em;
  background: rgba(#000,.8);
  border: 1px dashed #888;
  box-shadow: 0 0 0 10px rgba(#000,.8);
  color: #fff;
  *:first-child {
    margin-top: 0;
  }
  *:last-child {
    margin-bottom: 0;
  }
  h1, h2 {
    padding-bottom: 1em;
    border-bottom: 1px dashed #888;
  }
}