Web 在网页上无缝地使用大型背景图像

我想在我的网站上有巨大的背景图片，但不会给用户一个下载它们的困难时间，而且当背景加载时，网站看起来很难看

它们的大小不会超过1920 X 1080，但很难说以千字节/兆字节为单位

我的选择是什么？哪些最有效

---

我不太在意带宽，只是想让用户觉得一切都很好；）

一种选择是使用多个背景。以小背景作为底层，用大背景覆盖

如果你想在机身上安装两个背景，并且想支持IE，那么可能会很棘手。解决方案可能是启动较小的机身背景，一旦加载，使用JS将低分辨率背景更改为高分辨率背景：

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

---

请记住，如此大的背景需要比某些移动浏览器更多的RAM（iPhone pre-3GS要么拒绝解码这样的图像，要么开始在恐慌中清除缓存/标签内容）

后一个问题可以通过CSS媒体查询解决：

除了查询

max device width

而不是（虚拟/缩放）

max width