拉伸图像以适应背景CSS上的屏幕

Question

我正在尝试将图像“desk.png”作为我在单个网页上的背景而不滚动。我希望它完全适合Web浏览器。截至目前，我有：

body {
    background-image: url(desk.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

此时图像的上半部分被切断。当我尝试其他东西时，它已经切断了底部的很大一部分。我希望能够调整它并保持良好的分辨率而不会切断任何东西。

Answer 1

您可以使用：

body {
  background-size:100% 100%;
}

观看演示 http://jsfiddle.net/5k9eH/7/

Answer 2

正如已经指出的那样，您可以使用background-size属性以多种方式执行此操作。

选项1：调整大小而不考虑宽高比（如@Danko指出）：

background-size: 100%;

选项2：调整大小以使图像至少与正文一样大（正如@Zsigoveny指出的那样）：

background-size: cover;

选项3：调整大小以使图像在元素中尽可能大：

background-size: contain;

这些都是有效的选项，只取决于你想要的。

您可以在background size documentation中的cover和contain找到更多内容，并且您可能会喜欢Perfect Full Page Background Images上的精彩文章。

Answer 3

你可以这样做：

body{
    background-size:cover;
}

Answer 4

您可以使用：

body {
  background-image: url(desk.jpg);
  background-repeat:repeat;
  background-position:center;
  height:100%;
  width:100%;
}