css - CSSスプライト下部繰り返し

Question

divの下部にある背景のスプライトを設定したい場所で、スプライトの背景を繰り返してください。私はこれを持っています：

.statistics-wrap {
    margin-top: 10px;
    background: url(../img/bg-sprite.png) repeat-x 0 -306px bottom;
    overflow: hidden;
    border: 1px #BEE4EA solid;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 10px;
}

表示されないようです。下部を削除すると表示されますが、下部で繰り返したいdivの上部で水平方向に繰り返される背景に設定されています。

出来ますか？

Answer 1

CSSプロパティに問題がありますbackground...分解します

background:                   /* property name */
    url(../img/bg-sprite.png) /* background-image */
    repeat-x                  /* background-repeat */
    0 -306px                  /* background-position */
    bottom                    /* ummm... what?! */

...したがって、ブラウザはCSSプロパティを解析できません。この赤ちゃんをFirefoxにロードし、エラーコンソール（[ツール]> [エラーコンソール]）を確認すると、次の行に沿って何かが表示されます。

'background'の値の解析中にエラーが発生しました。宣言は削除されました。

だから私はあなたが何を考えているのか知っています...ただ「底」を削除してくださいね？しかし、その後何が起こるか...

background:                   /* property name */
    url(../img/bg-sprite.png) /* background-image */
    repeat-x                  /* background-repeat */
    /* background-position...               */
     0                        /* x-position */
     -306px                   /* y-position */

これで、背景画像がによってオフセットされます-306px。これは、の下部にない場合があります<div>。あなたが本当に運が悪ければ、それは底をはるかに超えてしまい、誰も<div>あなたの背景画像を見ることができません。

だから、このようなものをもっと試してみてください...

background: url(../img/bg-sprite.png) repeat-x 0px bottom

また...

background: url(../img/bg-sprite.png) repeat-x -306px bottom

-306px...そもそもなぜそこにあったのかによって異なります。

Answer 2

背景：url（../ img / bg-sprite.png）repeat-x -306px 100％;

しかし、あなたが達成したいと思うことのために、スプライトが良いアイデアになるかどうかはわかりません。

Answer 3

独自の行に設定bottom:0;して削除してみましたbackground:か？