White space title page with image background

background.css

// HTML

/*<div id="parent">
  <div id="photo"></div>
  <h1 id="title">anything</h1>
</div>*/

// CSS

#parent {
  height: 95vh;
  margin: 0;
  padding: 0;
}

#photo {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  height: 105vh;
  width: auto;
  z-index: -1;
  transform: translateX(-50%) translateY(-51%);
  background-size: cover;
  background-color: white;
  transition: 1s opacity;
  background-image: url("../img/sea.jpg");
}

#title {
  heigth: 95vh;
  margin: 0;
  font-align: center;
  font-size: 30em;
  font-weigth: 900;
  line-height:0.9em;
  letter-spacing: -0.1em;
  isolation: isolate;
  mix-blend-mode: darken;
  background: black;
  color: white;
}

Demo

Background image