1

Web サイトの背景を画面全体に表示する必要がありますが、縦に並べて表示する必要があります。HTML5が使えません。これがウェブサイトです。申し訳ありませんが、コードが乱雑です。元のコードを書いたのは、整理されたコードを正しくする方法がわからなかった数年前です。

4

3 に答える 3

3

CSS background-image を repeat-y オプションとともに使用する際の問題は、画像が画面の幅いっぱいにならないことです。

画像を幅いっぱいに表示し、ALSO タイルを垂直方向に表示するには、次の手順を実行します。私はテストしましたが、動作します。

  1. 背景画像を含む現在の<div class="background">ブロックを削除します

  2. <center>ページにある要素に次のコード ブロックを追加します。

    <center style="">
    <div class="background">
        <img src="BG/b1.jpg" />
        <img src="BG/b1.jpg" />
        <img src="BG/b1.jpg" />
    </div>

    ...rest of code

  3. 次の CSS ステートメントを追加/変更します。

center
{
  position:relative;
}
.background 
{
  height:100%;
  width:100%;
  min-height:800px;
  min-width:760px;
  position:absolute;
  overflow:hidden;
  left:0px;
  top:0px;
  z-index:-1;
}
.background img
{
  display:block;
  height:auto;
  width:100%;
  min-height: 800px;
  min-width:760px;
}
于 2012-04-02T23:53:10.693 に答える
1

これがあなたが探しているものだと私が信じている解決策です。高さの50px代わりに長さ (例: ) を使用することもできます。auto

#background {
 background-image:url("image.png");
 background-size:100% auto;
 background-repeat:repeat-y;
}

実施例

ブラウザのサポート

  • Firefox 4+ (を含める場合は 3.6 -moz-background-size)
  • Safari 4.1+ (含める場合は 3.0 -webkit-background-size)
  • クロム
  • Opera 10+ (含める場合は 9.5 -o-background-size)
  • Internet Explorer 9 以降 (IE8 以前のサイズ変更されていない背景)
于 2012-04-02T23:21:11.763 に答える
0

CSS で background-repeat:repeat-y を使用して縦方向に繰り返します。background-repeat:repeat を使用して、垂直方向および水平方向に繰り返します。

http://www.w3schools.com/cssref/pr_background-repeat.asp

CSS

body
{
    background-image:url('paper.gif');
    background-repeat:repeat-y;
}
于 2012-04-02T23:00:45.343 に答える