Firefox 上不显示背景图像大小

Question

背景图片在 firefox 上显示不正确，但在其他浏览器上显示正常。请参阅 the link here

body {
  background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Answer 1

这个属性有效：

background-size: 100%;

Answer 2

您应该使用 cover 而不是 background-size: 100% 100%;。这确保了图像将覆盖整个页面，无论大小如何（匹配高度或宽度取决于哪个更大）。像这样：

body {
  background-image: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

写出相同内容的更好方法是：

body {
  background: url('http://mycommunitylink.us/wp-content/uploads/2016/06/HCC_LandPage_1920x10803.jpg') center center / cover no-repeat;
}

编辑：真正的答案是@GCyrillus 答案和这个答案的组合。在正文中添加 height: 100% 或 height: 100vh 以获得全高图像。然后更新 background-size: cover 以在保持比例的同时正确拉伸图像。

Answer 3

background-size 正常工作，

但是你的内容在 position:absolute; 所以它没有 height 给正文，所以实际上没有 background 可以看到。

其他所有浏览器都使用 html 绘制背景并移动背景大小，而 firefox 将背景大小附加到 body 的实际大小，在我看来这更像是一个错误。

https://www.w3.org/TR/CSS2/colors.html (about backgrounds and colors ... )

您可以添加：

html {
    height:100%;
}
body {
    min-height:100%;
}

或使用 html 作为背景。

Firefox 上不显示背景图像大小

Background image size is not displaying on firefox

css

background-image