#hero {
  background-image: url(https://picsum.photos/1920/1080/?random);
  background-position: 50% 50%;
  background-size:cover;
  background-attachment: fixed;
  background-color: #ff0000;
  height: 100vh;
  width: 100%;
}

h1, h2 {
  color: #fff;
  text-align: center;
}

h1 { font-size: 60px; }

h2 { font-size: 19px; }

header {
  position: relative;
  top: 50%;
 transform: translate(0, -50%)  z-index: 2;
}

#hero-mask {
  background-color: rgba(0,0,0,0.7);
  height: inherit;
  left: 0;
  position: absolute;
  opacity: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  width: 100%;
}

.full-height { height: 100vh; }