JSFiddle - React, Tailwind, and code Playground

by and7ey

HTML

<body>
    <div class="page-bg" id="page-background1"></div>
    <!-- <div class="page-bg" id="page-background2"></div> -->
</body>

CSS

.page-bg {
    border:1px solid black;
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:#505D6E url(https://drscdn.500px.org/photo/97037403/m=900/d924fc03d69a82a604129011300916be) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript

url = "https://drscdn.500px.org/photo/97037259/m=900/030e1598b7822cd6c41beb4c7a4e466d";

$("#page-background1")
    .animate({
    opacity: 0
}, 'slow', function () {
    $("#page-background1")
        .css({
        'background-image': 'url(' + url + ')'
    })
        .animate({
        opacity: 1
    });
});