My transition doesn't work on FireFox though it works perfectly on Edge and Chrome

My transition doesn't work on FireFox though it works perfectly on Edge and Chrome.

I tried to search this problem on Google but still couldn't fix it.

Here's my code:

.background{
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: url(../img/hinh2.png);
  -webkit-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
  background-size: contain;
}
.background:hover{
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: url(../img/hinh1.png);
  background-size: contain;
}

<div class="background"></div>

Thanks a lot for helping me!

Solution

Firefox does not seem to support transitions on background-image yet. Using :before or :after pseudo-elements is one possible solution:

.background {
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-size: contain;
}

.background::after {
  width: 1280px;
  height: 720px;
  content: "";
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-size: contain;
  z-index: 1;
  position: absolute;
  transition: 1s ease-in-out opacity;
  opacity: 0;
}

.background:hover::after {
  opacity: 1;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Background hover</title>
</head>

<body>
  <div class="background"></div>
</body>

</html>