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%;

            }