-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

質問に含めた画像から、上に行くにつれてフェードアウトする画像があり、ページの下部でのみ繰り返されているように見えます。そうでない場合は、すでに与えられた回答が質問を完全にカバーしています。

デフォルトでは、背景画像は、背景領域全体を覆うまで、水平方向と垂直方向の両方で繰り返されます。1 つの画像をスペース全体に広げたい場合は、他の回答を参照してください。画像を画面の下部全体に水平に繰り返し表示したいが、垂直方向には繰り返し表示したくない場合は、次を追加する必要があります。

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

background-size: 属性を削除します。これにより、画像が画面の下部に留まり、コンテンツが画面の下部からはみ出す場合、テキストがその上をスクロールします。コンテンツが画面全体に表示されない場合でも、画像はページの下部に繰り返し表示されます。

background-attachment: 属性を削除すると、画像はコンテンツ領域の下部を横切って繰り返されますが、画面の途中まで表示されたり、画面の下部から完全にスクロールされたりすることはありません。

于 2013-03-27T16:08:47.293 に答える
0

背景サイズ:100%;

あなたのバージョン (1px 100%) は高さを制限しています。

于 2013-03-27T15:19:57.707 に答える
0

あなたはそれを試すことができますか：

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