bg fade in no-js

by James Doyle

HTML

<div id="wrapper" class="home"></div>

CSS

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0;
    -webkit-animation: fadeIn 2s forwards ease;
}

#wrapper:before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    background: url(../images/pattern.png);
}

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

.home {
    background: url(http://www.makems.com/graphic/puppies-2.jpg) no-repeat;
}