размер фона min () min (); работает в chrome, но не в firefox или Edge

Question

Я только начал разработку нового сайта и уже столкнулся с проблемами в разных браузерах.

У меня есть следующие строки css для установки фонового изображения:

body
{
    background-image: url("../Images/Background.jpg");
    background-repeat: no-repeat;
    background-size: max(100vw, 1920px) max(100vh, 876px);

}

Это работает штраф Chrome, но размер фона не применяется в Firefox или Edge. В инспекторе Firefox написано «недопустимое значение свойства».

Есть ли у вас какие-то обходные пути? Я хочу, чтобы изображение растягивалось до размера окна, но поддерживаю его размер в своем разрешении, если окно меньше. Я не могу использовать минимальную высоту, поскольку это растянет окно, даже если нет содержимого.

Спасибо!

Answer 1

Вы можете смоделировать это, используя псевдоэлемент:

html:before {
  content: "";
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background: url("https://i.picsum.photos/id/1074/800/800.jpg") center/cover no-repeat;
  min-width:800px;
  min-height:800px;
  width:100vw;
  height:100vh;
}