Отображение фона сверху и снизу от div? #multiple background-position

Question

Мне нужно, чтобы этот маленький серый прямоугольник (красный круг) отображался как сверху, так и снизу элемента div, содержащего миниатюры (кстати, этот тег также может содержать 2 или 3 ряда миниатюр):

вот мой код того, как он выглядит:

.jq_thumbnails {
    background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
    overflow: auto;
    height: 100%;
}

Можно ли легко добиться этого эффекта?Я думал о создании тега ifequal, который бы проверял длину списка миниатюр и соответственно использовал определенную фоновую картинку, но, возможно, этого можно добиться, используя только html / css?

Answer 1

Вы можете использовать CSS3 несколько фоновых изображений :

.jq_thumbnails {
    background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
    background-position: 0 0, 0 bottom;
}

Установите свойство background-repeat в соответствии с вашим конкретным сценарием:

background-repeat: repeat-x, repeat-x;

Это поддерживается во всех текущих версиях основных браузеров:

Answer 2

Конечно, вы можете создать внешний div и внутренний, который покрывает фон, так что вы можете repeat-y background;)