<body>
  <div class="background-static">
    <div class="image-wrapper">
      <div class="small">
        <img class="smile" src="https://linxea.github.io/codingclub/images/face.gif">
      </div>
    </div>
  </div>

  <div class="scrollable">
    <div class="title">
      <h1>Coding Club</h1>
      <h2>by linxea</h2>
    </div>

    <div class="background-static">
      <div class="image-wrapper">
        <div class="small">
          <img class="meh" src="https://linxea.github.io/codingclub/images/face.gif">
        </div>
      </div>
    </div>
  </div>
</body>
    body {
      height: 100vh;
      margin: 0;
      font: 400 10px Lato, sans-serif;
    }

    .title {
      position: relative;
      background-color: black;
      text-align: center;
      padding: 1rem 0;
      z-index: 10;
    }

    h1 {
      font-size: 1.8rem;
      color: white;
      letter-spacing: 0.6rem;
      margin-bottom: 0.5rem;
    }

    h2 {
      font-size: 1rem;
      color: #fff;
      font-weight: 200;
      letter-spacing: 0.2rem;
      margin-top: 0;
    }

    .background-static {
      position: relative;
      display: flex;
      justify-content: center;
      vertical-align: middle;
      align-items: center;
      height: 100vh;
    }

    .image-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    img {
      height: 1080px;
      width: 1080px;
      object-fit: none;
      object-position: 0 0;
    }

    .smile {
      object-position: 100% 100%;
    }

    .meh {
      object-position: 0 0;
    }

    .scrollable {
      position: relative;
      background: white;
      margin-top: -25vh;
    }

    .small {
      transform: scale(0.4);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.