If you have ever had a background image that you wanted to show more of, consider panning through it using this technique.

First we create a simple header - you could mark it up however you wish, however to keep things simple I did


Next for the CSS, the first few lines are to position things, so style it as you please. The important thing here is the background and animation bits. Also keep in mind that vendor prefixes may be required.

header {
  height: 200px;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-image: url(https://devblog.lastrose.com/assets/instacode.png); 
  animation-name: move;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
h1 { color: white; }

@keyframes move {
  0%, 100% {
    background-position: top;
  50% {
    background-position: bottom;