JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DIV-THAT-NEEDS-PRELOADING">
</div> 


<!--This will be the loading DIV that will show until the background has loaded-->
<div id="table">
    <div id="cell">
        <div id="LOADING-SIGN-DIV">
            <img src="http://i.imgur.com/YqpCD.gif">
        </div>
  </div>
</div>

CSS

#DIV-THAT-NEEDS-PRELOADING {
    display: none;
    height: 100%;
    width: 100%;
    position:absolute;
    top:0;
    right:0;
    background-image: url('http://www.travelblog.org/Wallpaper/pix/turtle-wallpaper-1152x864.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}





html, body {
    background-color: #000;
    height: 100%;
    padding: 0;
    margin: 0;
}

#table {
    display: table;
    height: 100%;
    width: 100%;
    position:relative;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

#LOADING-SIGN-DIV {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

JavaScript

window.setTimeout(function() {
    $('#LOADING-SIGN-DIV').fadeOut();
    $('#DIV-THAT-NEEDS-PRELOADING').fadeIn();
}, 1000);