HTML/CSS - 使背景适合任何窗口大小

Question

我需要帮助使我的背景合适。如果我使用全屏窗口，我希望显示并拉伸(stretch)整个图像。

图像比我的显示器小，所以当我尝试拉伸(stretch)它时，它只会放大。我会给你看图片。

图片可以在这里看到: http://i.imgur.com/DDsTag7.jpg

到目前为止我的代码(CSS):

body {
   background-image:url(Ranger_with_Tusks_of_Killed_Elephant.jpg);
   background-size:100%;
   background-repeat:no-repeat;
   height: 100%;
   width: 100%;
}

它完全破坏了我屏幕尺寸的背景图像:1920x1080

无论大小如何，我怎样才能让它显示整个图像？最好只使用 CSS。

只要窗口大小不超过图像的宽度/高度，我的代码就可以正常工作。尝试我的代码并亲自查看，它没有显示完整图像。就像放大了一样。

Answer 1

只需使用下面的代码

html{
                background: url(Ranger_with_Tusks_of_Killed_Elephant.jpg) no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover; 
                background-size: 100% 100%;

            }