Как сделать рамку картинке на CSS?

Question

[Дмитрий]

Есть такой dom

<div class="img-border">
   <img src="">
</div>

Не знаю как реализовать рамку к картинке. Она находится за изображением, а нужно на переднем плане. Нужно как то реализовать без позиционирования. Как это сделать?

Рамка такого вида

.img-border {
   background:
        url('/1.png') no-repeat 100% 100%,
        url('/2.png') no-repeat 0 100%,
        url('/3.png') repeat-x 0 100%,
        .... N repeat;
}

Answer 1

[archelon]

псевдоэлементы :before и :after не пробовали использовать?

Comments

[Дмитрий]

не работает

[Тимофей Белоусов]

Дмитрий: а вы не пробовали картинке задать свойство блока или инлайн-блока?

Answer 2

[gwenn]

.img-border {
    border: 1px solid #333;
}

Как-то так.

Answer 3

[Вадим Белкин]

Если рамку вы делаете посредством фоновых картинок,

.img-border {
   background:
        url('/1.png') no-repeat 100% 100%,
        url('/2.png') no-repeat 0 100%,
        url('/3.png') repeat-x 0 100%,
        .... N repeat;
}

То доп.элементами поверх картинки можно, а проще как посоветовал archelon, через псевдоэлементы.
Через position: absolute растяните по контейнеру .img-border, через z-index поместите на передний план поверх изображения.
У .img-border установите position: relative