Fade in background image

fade_in_backgroun_image

// 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;
}

// JS
$(document).ready(function() {
  $('.background-image').on('webkitAnimationEnd', function(e) {
    $(this).addClass('visible');
  });
});