JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>





<title>test</title>

</head>


<body>


<div id="div_bg_effect" >
<p>asdfsafas dfa sfl asdfl</p>

</div>


</body>



</html>

CSS

#div_bg_effect
{
    
    width: 800px;
    height: 600px;

    
    background-color: darkgrey;
    background-image: url('http://4.bp.blogspot.com/-kGphpzNJIFQ/TYeUojPQ7AI/AAAAAAAAAQk/Wkuqq5iFrdE/s1600/430px-No_free_image_man_%2528en%2529_svg.png');

    background-repeat: repeat-x;
    color: white;

    display: block;
    overflow:hidden;
}

#div_bg_effect p
{
    display: none;
}

JavaScript

$(document).ready(function(){
$("#div_bg_effect").css({'background-image':"none"});
$("#div_bg_effect").clone().appendTo('#div_bg_effect');

$("#div_bg_effect").delay(900).fadeIn(function(){

$("#div_bg_effect").css({'background-image':""});

$("#div_bg_effect #div_bg_effect").fadeOut();
$("#div_bg_effect p").fadeIn(1200);
});

});