html自动缩放不出现滚动条,html – 如何通过显示滚动条来避免全屏背景图像缩放？...

我的客户想要她的新网站的全屏背景.设置并不复杂,因为我选择了CSS3方法,并为旧的IE版本提供了回退.这是CSS：

html {

/* Fullscreen backgroung image per CSS3 with 'background-size: cover' */

background: url(../images/background.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

}

现在这确实像宣传的那样工作.但是当我重新加载页面或转到另一个页面时,加载背景图像,然后出现内容,这会导致垂直滚动条,然后使背景图像缩小一点(由于现在较小的查看空间)并产生排序对背景图像的“跳跃”效果 – 非常烦人！

如果所有内容都被缓存它很好,但否则会对背景图像产生令人讨厌的调整大小效果！

如何避免在内容之前加载背景图像,以便第一次显示正确！