-1

我知道有人问过这个问题，我认为我做得对，但它只是拉伸了内容的高度。

这是我的例子：

在此处输入图像描述

我的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;
}

两者都这样做：

在此处输入图像描述

4

4 回答 4

2

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

backgound-size: cover;

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

但这里的主要问题是您的 body/html 的最小高度不是 100%。如果您只使用它可能会起作用：

body, html {
   min-height: 100%;
}
于 2013-03-27T15:17:53.683 回答
1

从您在问题中包含的图像看来，您的图像在上升时会淡出，您只是在页面底部重复。如果不是这种情况，他们已经给出的答案完全涵盖了这个问题。

默认情况下，背景图像将水平和垂直重复，直到覆盖整个背景区域。如果您希望将一张图像延伸到整个空间，请参阅其他答案。如果您希望图像在屏幕底部水平重复而不是垂直重复，那么您需要添加：

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

并删除 background-size: 属性。这将导致图像停留在屏幕底部，如果内容超出屏幕底部，文本将在其上滚动。如果您的内容没有填满整个屏幕，图像仍会在页面底部重复出现。

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

于 2013-03-27T16:08:47.293 回答
0

你能试试吗：

background-size: 100% auto; # width and height, can be %, px or whatever.
于 2013-03-27T15:18:17.610 回答
0

背景大小：100%；

您的版本（1px 100%）正在限制高度。

于 2013-03-27T15:19:57.707 回答