HTML全屏背景图像

我不确定新发布的Firefox35.0中是否有bug，或者我的代码是否有问题，但是在一个web应用程序背后，我一直在使用下面的方法在用户界面后面设置一个高分辨率（缓存）背景图像。从今天起，在升级到Firefox 35.0后，这将不再正常工作-背景图像仅从页面顶部向下加载大约5-10%，然后下面的背景是一个稳定的#000000。如果我从一台Firefox还没有升级的计算机上加载相同的代码，它就可以很好地工作，在IE中也可以很好地工作

/*这是重要的部分*/
背景图像{
高度：自动；
左：0；
最小高度：100%；
最小宽度：1024px；
位置：固定；
排名：0；
宽度：100%；
z指数：-1；
}
/*这只是为了给出一些示例上下文*/
分区#集装箱{
背景色：透明；
保证金：0自动；
文本对齐：左对齐；
宽度：600px；
}
分区#画布{
高度：300px；
背景色：#ffffff；
}

Web应用程序在这里

将背景像这样放在body标签上

body {
background-image(url) ; 
}

---

将

CSS

应用于

html

元素并去掉

img

标记

html{

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

如果您想知道为什么

html

而不是

body

，请检查

body

似乎是可行的，但是，正如对此答案的评论中所述，

html

始终保证至少是窗口的高度，这不会导致意外行为

---

希望这对您有所帮助。

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

经过两天的努力，这个问题似乎已经在Firefox36.0测试版中得到了解决

显示问题的一个非常简单的测试用例如下：

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

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

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

---

注意：如果您正在使用服务器上的现有图像来测试此功能，请先清除FireFox 35.0缓存。

为什么您要对全屏背景图像使用实际的

标记，而不是。。。你知道。。。a

背景img

？CSS仅具有

背景尺寸：封面

将使这变得容易得多。web应用程序是在CSS v2成为标准时编写的，CSS v3的采用介于最小和不存在之间。我个人还没有见过这个v3附加的封面选项，但我喜欢它，它的工作非常好！不幸的是，这不会提供缩放的全屏背景图像，但会使用原始尺寸的图像并平铺它。解决方案需要适用于所有桌面屏幕大小。您只需添加背景大小：对于添加此信息，我显然不会发疯！