<html>
  <body>
    <div class="box header">
      <div class="text">
        <h1>Wasted City</h1>
        <p>Image by <a href="http://members.home.nl/jeroenderks/">Jeroen Derks</a>
      </div>
    </div>
    <div class="content">
      <p>This pen shows a method to produce window-height content without the <code>vh</code> units.</p>
      <p>By setting both <code>html</code> and <code>body</code> to <code>100%</code> you can then set any individual containers to <code>100%</code> height as well, thus making it take up the full browser height.</p>
      <p>It also shows the box-shadow inline padding technique that I'm very fond of.</p>
    </div>
    <div class="box yet-again">
      <div class="text">
        <h1>Vampires Empire</h1>
        <p>Image from <a href="http://csdb.dk/release/?id=110216">a C64DTV demo of the same name.</a>
      </div>
    </div>
  </body>
</html>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900);

body {
  font-family: 'Source Sans Pro', sans-serif;
}

html,body,.box{
  height:100%;
  margin:0;
  padding:0;
}
.box{position:relative;}
.header{
  background:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0)),
    url('http://i.imgur.com/uoFcP2O.jpg');
  background-size:cover;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}
h1 {
  text-transform: uppercase;
  margin: 0;
  font-size: 3rem;
  white-space: nowrap;
}
p {
  margin: 0;
  font-size: 1.3rem;
}
.content {
  max-width: 500px;
  margin: 20px auto;
}
.content p{
  margin:15px;
}
.yet-again{
  background:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0)),
    url('http://i.imgur.com/0aHLxle.jpg');
  background-size:cover;
}
a, a:visited{
  color:white;
  text-decoration:none;
  background:rgba(255,255,255,0.7);
  color:black;
  box-shadow:-5px 0 0 rgba(255,255,255,0.7),5px 0 0 rgba(255,255,255,0.7);
  margin:5px;
}
a:hover{
  background:rgba(0,0,0,0.7);
  color:white;
  box-shadow:-5px 0 0 rgba(0,0,0,0.7),5px 0 0 rgba(0,0,0,0.7);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.