CodePen

HTML

            
              <div class="background-image">
  
</div>
            
          
!

CSS

            
              @-webkit-keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.background-image {
  background: url('http://graygilmore.com/images/bk-body.jpg') no-repeat center center fixed;
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  opacity: 0;
  
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 2s;
}

.background-image.visible {
  opacity: 1;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
  $('.background-image').on('webkitAnimationEnd', function(e) {
    $(this).addClass('visible');
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................