HTML 全屏背景图片

Question

我不确定是新发布的 Firefox 35.0 有 bug 还是我的代码有问题，但是在一个 web 应用程序后面我一直使用以下设置高分辨率（缓存) 用户界面后面的背景图像。从今天升级到 Firefox 35.0 后，这不再正常工作 - 背景图像仅从页面顶部向下加载大约 5-10%，然后下面的背景是纯色 #000000。如果我从未升级 Firefox 的计算机上加载相同的代码，它可以完美运行，在 IE 中也可以正常运行。

/* This is the important part */
img.background-image {
  height: auto;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* This just to give some example context */
div#container {
  background-color: transparent;
  margin: 0 auto;
  text-align: left;
  width: 600px;
}

div#canvas {
  height: 300px;
  background-color: #ffffff;
}

<div id="container">
  <img class="background-image" 
       src="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" alt="" />
  <div id="canvas">
     Web Application is here
  </div>
</div>

请你告诉我是否有办法实现这一点，以便它在所有最新版本的 Firefox 和 IE 上正常工作，或者我是否应该保留它并希望 Firefox 发布另一个快速错误修复？！谢谢。

注意：此处指定的背景图片只是我从 Google 中找到的示例图片，仅供此问题片段使用，而不是用于 Web 应用程序的真实图片。

Answer 1

像这样把背景放在正文标签上

body {
background-image(url) ; 
}

Answer 2

将 CSS 应用于 html 元素并删除 img 标签。

html{

     background-size:cover;
     background-image:url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg);
}

如果您想知道为什么 html 而不是 body，请查看 this article。

body 似乎可行，但是，正如对此答案的评论中提到的，html 总是保证至少是 window 的高度，这赢得了'导致意外行为。

希望对您有所帮助。

Answer 3

我在 FireFox 35.0 使用大图像时遇到过类似的问题。

纠结了两天，看来这个问题已经在 FireFox 36.0 Beta 中修复了。

https://bugzilla.mozilla.org/show_bug.cgi?id=1122845

一个非常简单的测试用例来说明问题如下：

var img = new Image();
img.style.position = 'fixed';               
document.body.appendChild(img);                    
img.src = "path/to/a/large/image.jpg";

这只是问题表现出来的一种方式。

只会显示图片的一小部分。图像甚至不需要很大，例如 200kb 会导致问题。

注意：如果您使用服务器上的现有图像对此进行测试，请先清除 FireFox 35.0 缓存。

HTML 全屏背景图片

HTML full screen background image

html

css

xhtml