ybdzgL

index.html

<div id="site-wrapper">
  <section id="title-page">
    <div class="header-gradient"></div>
    <div class="header-overlay"></div>
    <div class="header-image"></div>
    <div class="header-underlay"></div>
    <div id="logo-container"><img src="/cf_logo.png"></div>
  </section>
</div>

style.css

#site-wrapper, #title-page, body, html {
  height: 100%;
}

#title-page {
  position: relative;
}

.header-gradient, .header-overlay, .header-image, .header-underlay {
  width: 100%;
  height: 100%;
  position: absolute;
}

.header-gradient {
  z-index: 13;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.47) 0%,rgba(125,185,232,0) 20%)
}

.header-overlay {
  background-color: #808080;
  opacity: 0.2;
  z-index: 12;
}

.header-image {
  opacity: 0.32;
  z-index: 11;
  background-size: cover;
  background-image: url("/cf_bg.jpg");
}

.header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-underlay {
  background-color: #000000;
  z-index: 10;
}

#logo-container {
  z-index: 14;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 1em;
}

ybdzgl.markdown

ybdzgL

A Pen by Mika on CodePen.

License.