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;

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

2 个答案: