Profile Header

In this example below you will see how to do a Profile Header with some HTML / CSS and Javascript

Trying out some of what I learned from this CSS-Tricks post while repurposing some background art assets from my game Lotsa Blocks. 🌲

Thumbnail
This awesome code was written by tylersticka, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tylersticka ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Profile Header</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  <div class="far"></div>
  <div class="mid"></div>
  <div class="near"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tylersticka/profile-header-mewaqW */
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }
}

@keyframes slide {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #6eace6;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/bg-pdx-mountains.svg");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: auto 180px;
}

.wrapper,
.far,
.mid,
.near {
  min-height: 100%;
  position: absolute;
  bottom: 0;
}

.wrapper {
  width: 100%;
  overflow: hidden;
}

.far,
.mid,
.near {
  width: 6000px;
  height: 198px;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 600px 198px;
  -webkit-animation: slide linear infinite;
          animation: slide linear infinite;
}

.far {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/bg-pdx-forest-far.svg");
  -webkit-animation-duration: 60s;
          animation-duration: 60s;
}

.mid {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/bg-pdx-forest-mid.svg");
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
}

.near {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/bg-pdx-forest-near.svg");
  background-size: 600px 158px;
  height: 158px;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
}

Comments