I have an issue where my background image shows just on Chrome but not on Firefox or Edge.

What I'm trying to do is to have a different background image every time I load my page.

$(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;
}

CodePudding user response：

First of all, thank you everyone who tried to help, but I've just had moment of enlightenment and solved this problem. still don't know answer why it was working on Chrome, but managed to make it work properly on other browsers now. What i did:

1. Added "style="background-image: url(''); " as inline style on my html object.
2. Changed url on js function to = img/img_" rnd ".jpg . Because it goes from html file. My previous url basically was looking for imgages outside of project folder.

Again, thanks everyone who tried to help.