我有一个网站，我使用chrome开发工具开始工作。然而，当在Firefox中查看网站时，背景图像只能在页面中间的一个小条带中查看。
我的背景图像的代码如下：
body {
background-image: url(../assets/headerbackground.jpg);
min-height: 0px;
-webkit-background-size: 100vmax;
-moz-background-size: 100vmax;
-o-background-size: 100vmax;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/headerbackground.jpg', sizingMethod='scale');
}
如有任何帮助，我们将不胜感激。不确定如何对此进行故障排除。
更新：
找到了我的问题的解决方案：我的<body>有一些元素使它夹在页眉和页脚之间。从<body>中删除这些元素就成功了。
您应该能够去掉供应商前缀，contain和cover已经被广泛采用了一段时间。
https://caniuse.com/?search=background-尺寸
body {
background-image: url('../assets/headerbackground.jpg');
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
除此之外，根据经验，我会从body标签中删除样式，并用类似<div id="app"> ... </div>的东西包装您网站的内容。<html>和<body>标记在每个浏览器中的呈现方式不同，这很可能是导致您的网站在不同的浏览器中显示方式不同的原因。RMZ