JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h1>Random Background Images on Refresh</h1>
<div class="section-bg">
    	<div class="bg bg1"><img src="https://m1.behance.net/rendition/modules/145790941/disp/73e3d2626556b644948f558782090457.gif" alt="" /></div>
        <div class="bg bg2"><img src="https://m1.behance.net/rendition/modules/144000257/max_1200/f712f3c1b74d245e8d98a5d4609e6579.png" alt="" /></div>
        <div class="bg bg3"><img src="https://m1.behance.net/rendition/modules/114431943/max_1200/1b4410eaabba86b3954e971a99cf2caa.jpg" alt="" /></div>
        <div class="bg bg4"><img src="https://m1.behance.net/rendition/modules/114431951/max_1200/db23d1d908e7a37eadba2e88c0392e12.jpg" alt="" /></div>
 
    </div>

CSS

body {text-align:center; }
.section-bg .bg img {
    max-width:100%;
}

.section-bg {
    left: 0;
    position: absolute;
    top: 0;
    z-index: -1;
    width:400px;
}

JavaScript

var random = Math.floor(Math.random() * $('.bg').length);
$('.bg').hide().eq(random).show();