<div class="card-wrapper">
  <div class="content">
    <div class="welcome">Welcome to</div><br>
    <h1>Houston</h1>
  </div>
  <div class="shade"></div>
  <div class="card__bg__image">
    <img alt="" src="http://media.futurebutterflies.net/houston-besomeone.jpg" >
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Merienda');

@-webkit-keyframes card-shift {
 0% {
  -webkit-transform:translate3d(-30px,0,0);
  transform:translate3d(-30px,0,0)
 }
 25% {
  -webkit-transform:translate3d(0,-30px,0);
  transform:translate3d(0,-30px,0)
 }
 50% {
  -webkit-transform:translate3d(0,-30px,0);
  transform:translate3d(0,-30px,0)
 }
 75% {
  -webkit-transform:translate3d(-30px,0,0);
  transform:translate3d(-30px,0,0)
 }
 to {
  -webkit-transform:translate3d(-30px,0,0);
  transform:translate3d(-30px,0,0)
 }
}
@keyframes card-shift {
 0% {
  -webkit-transform:translate3d(-30px,0,0);
  transform:translate3d(-30px,0,0)
 }
 25% {
  -webkit-transform:translate3d(0,-30px,0);
  transform:translate3d(0,-30px,0)
 }
 50% {
  -webkit-transform:translate3d(0,-30px,0);
  transform:translate3d(0,-30px,0)
 }
 75% {
  -webkit-transform:translate3d(-30px,0,0);
  transform:translate3d(-30px,0,0)
 }
 to {
  -webkit-transform:translate3d(-30px,0,0);
  transform:translate3d(-30px,0,0)
 }
}

body {
  margin:0;
  padding:0;
}

.card-wrapper {
  overflow: hidden;
  display: block;
  height: 900px; 
  position: relative;

  .content {
    display: flex;
    align-items: center; 
    justify-content: center;
    height: 100vh;
  }
  .welcome {
    font-family: Merienda;
    font-size: 3em;
    color: #fff;
    display: block;    
  }
  h1 {
    font-family: 'Alex Brush';
    color: #fff;
    font-size: 9em;
    text-shadow: 5px 4px 7px rgba(#000, .4);
    display: block;
  }

}
.shade {
  position: absolute;
  z-index: -1;
  // background: rgba(blue,.6);
  background: -webkit-linear-gradient(top, rgba(#103d85, .6), rgba(#451f49,.8) 62%, rgba(#5b2911,.4) 99%);
  background-image: linear-gradient(180deg, rgba(#103d85, .6), rgba(#451f49,.8) 62%, rgba(#5b2911,.4) 99%);
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.card__bg__image {
  height: calc(100% + 30px);
  width: calc(100% + 30px);
  -webkit-animation: card-shift 12s ease-in-out infinite;
  animation: card-shift 12s ease-in-out infinite;
  position: absolute;
  z-index: -3;
  // height: 600px;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
}

.card__bg_image img {
  object-fit: fill;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.