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

Question

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

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

图片可以在这里看到： 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%;

            }

Answer 2

我想你要找的是background-size: cover;