全尺寸背景，无需调整大小

Question

我现在面对这个问题很长一段时间了，尝试了很多选择，但仍然没有运气。 我有这个背景图片：

我想将其作为我网站的背景。我将它添加为完整大小的背景，但我不知道为什么它总是会调整大小并变成这样的。

这是我的背景图片的css代码。

body
{
  background: url('../images/home.jpg') no-repeat   center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
}

我真的不确定如何解决这个问题！请以正确的方式指导我。

Answer 1

CSS3中的background-size: cover属性会拉伸您的图像以适合您指定的元素的背景，在本例中是您的身体。

编辑：正如其他人所提到的，使用background-size: contain会给您最理想的结果，因为它由以下内容定义：

包含
此关键字指定应将背景图像缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。

以下链接还有其他可以为您提供所需结果的属性： 来源：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

尝试使用background-size:contain代替background-size:cover。也许这更合适。

Answer 3

要确保，请为每个子属性拆分background属性：

body
{
    background-image: url('http://i.stack.imgur.com/ZQinh.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

http://jsfiddle.net/Paf_Sebastien/j0n19rw5/1/

编辑：

将此添加到CSS中，因为您的HTML /正文似乎具有较低的高度：

html, body {height: 100%;}

Answer 4

如果您希望保持图像的比例，则可以使用

background-size: contain;

然而，这个问题是它会保持背景比例，所以如果你的窗口比例不同，你会有白色空间。建立@Sebastien的小提琴，我可以告诉你我的意思 -

http://jsfiddle.net/j0n19rw5/5/

您可以尝试重新调整图像本身，以便更好地使用包含。

但如果你想要它覆盖背景，你可能最好使用封面。一个技巧是将图像裁剪到空间（如果您知道一般尺寸）。

你可以通过类似这样的方法在不拉伸太多的情况下离开：

https://jsfiddle.net/r3qpe4dm/1/

但它仍会以较小的尺寸切断你的图像。