JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="nextImage">
     Bunch of Content
</div>
    <div id="content">
        your content here
</div>
</body>

CSS

body 
{
    background-image:url("abstract1.jpg");
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
}
#nextImage
{
    position: absolute;
    background:red;
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
    z-index:1;
}
#content
{
 position: relative;
z-index: 10; 
padding-top: 50px;    
}

JavaScript

$('#nextImage').css('background-image', 'url(Tranquil.jpg)').hide();
    $('#nextImage').fadeIn(5000);