如何让我的背景拉伸整个页面

Question

我知道有人问过我以为我正确地做了这件事，但它只是拉伸了内容的高度。

以下是我的例子：

我的css如下：

body 
{   
  background-color: #ffffff;
  font-size: .85em;
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
  color: #4c89b6;

        background-image: url('../Content/images/tribackground.png');
        background-repeat: repeat-x;
        background-size: 1px 100%;

}

有关如何使用背景填充页面的任何建议吗？

=======更新=======

我做了以下更改：

body 
{   
  background-color: #ffffff;
  font-size: .85em;
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
  color: #4c89b6;

  backgound-size: cover;
  background-image: url('../Content/images/tribackground.png');
  background-repeat: repeat-x;
}

我也尝试过：

body 
{   
  background-color: #ffffff;
  font-size: .85em;
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
  color: #4c89b6;

  background-size:100%;
  background-image: url('../Content/images/tribackground.png');
  background-repeat: repeat-x;
}

都这样做了：

Answer 1

在现代浏览器中，您可以使用

backgound-size: cover;

此处列出了一些不同的方法： http://css-tricks.com/perfect-full-page-background-image/

但这里的主要问题是你的身体/ html的最小高度不是100％。如果你只是使用它可能会有用：

body, html {
   min-height: 100%;
}

Answer 2

从问题中包含的图片看，您的图像会随着图像的上升逐渐消失，而您只会在页面底部重复这些图像。如果不是这种情况，他们已经给出的答案完全涵盖了这个问题。

默认情况下，背景图像将水平和垂直重复，直到覆盖整个背景区域。如果您想要在整个空间中展开一个图像，请查看其他答案。如果您希望图像在屏幕底部横向重复但不是垂直重复，则需要添加：

background-attachment: fixed;
background-position: bottom;

并删除background-size：属性。这将导致图像停留在屏幕的底部，如果内容从屏幕底部延伸，文本将在其上滚动。如果您的内容未填满整个屏幕，则图片仍将在页面底部重复显示。

如果删除background-attachment：属性，则图像将在内容区域的底部重复，而不是在屏幕上方或从屏幕底部完全滚动。

Answer 3

你能试试吗：

background-size: 100% auto; # width and height, can be %, px or whatever.

Answer 4

背景尺寸：100％;

你的版本（1px 100％）限制了身高。