My current issue is that the background image only appears on Chrome and not on Firefox or Edge. I am trying to have a different background image each time the page loads.
$(document).ready(function() {
var totalBGs = 5;
var rnd = Math.floor(Math.random() * totalBGs);
$(".main").css({
backgroundImage: "url(../img/img_" + rnd + ".jpg)"
});
});
.main {
background-image: url("../img/img_0.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
margin-top: 5rem;
flex-direction: column;
align-items: center;
}