CSS Sprites Bottom повторяется

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

Похоже, он не появится, если я уберу bottom , он появится, но он будет установлен на фоне, повторяющемся горизонтально вверху div, который я хочу повторить внизу.

Возможно ли это?

Answer 1

Я вижу что-то не так с вашим background свойством CSS ... Я сломаю его

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:?